關於ThinkSNS+程序的 SPA（H5）安裝教程

ThinkSNS Plus最新體驗demo：請於官網下載/安裝最新版或點擊在線諮詢

最新官方活動：ThinkSNS+ V2.0賀中秋 9月20日權威發佈 8.8折限時搶購

http://www.thinksns.com/reader/252.html

H5 是 HTML 5 的縮寫，也表明新瀏覽器技術和標準，例如一些先進瀏覽所支持的一些 HTML 5 標準 APIs

#什麼是 SPA

單頁 Web 應用（single page web application，SPA），就是隻有一張 Web 頁面的應用。單頁應用程序 (SPA) 是加載單個 HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。瀏覽器一開始會加載必需的 HTML、CSS 和 JavaScript，全部的操做都在這張頁面上完成，都由 JavaScript 來控制。所以，對單頁應用來講模塊化的開發和設計顯得至關重要。

說明參考：

· SPA · 百度百科

· 單頁應用 · 維基百科

#簡介

Plus 小屏網頁客戶端（如下簡稱 Plus SPA）是使用 Vue.js 及 ES+ 等現代 Web 技術進行構建編寫的 Web 單頁應用。其純前端的代碼，容許將 Plus SPA 分發到網絡上的各個地方，甚至你能夠進行設備嵌入本地運行，只要你有一個能夠渲染 JS + HTML + CSS 的應用便可。

#下載程序

在前面的教程中，咱們在 CentOS 7.4 的服務器中已經安裝可 Git 軟件，若是你是直接跳過來看 SPA 安裝教程的，請在 CentOS 中運行下面的命令安裝，若是你不是 CentOS 系統，請自行從 Git 官網安裝，命令以下：

yum install -y git

咱們的 SPA 代碼存放在slimkit/plus-small-screen-client」。

如今，咱們進入 CentOS 中，而後按照以前安裝 Plus 的慣例，咱們將程序代碼存放在 /usr/local/src目錄中，因此咱們執行 cd /usr/local/src 便可進入該目錄，而後咱們執行下面的命令：

git clone https://github.com/slimkit/plus-small-screen-client spa && cd spa

執行完成你，你能夠執行 pwd 你能夠看到你當前所處的位置爲 /usr/local/src/spa，這就是咱們的代碼位置了。

#安裝 Node.js

咱們打開 Node.js 官網下載頁面 默認會選擇 LTS 版本，目前我這裏最新的是 8.12.0 版本，咱們在頁面找到 ·Linux Binaries (x86/x64)· 這一行，我這裏系統是 65 Bit 因此我點擊這一行的 64-bit 按鈕，你更具你係統選擇。若是你不清楚，請看下圖：

 

經過上圖可知，我這裏須要 64-bit 右鍵後選擇「複製連接地址」獲得 https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz 這樣的地址。咱們如今回到服務器家目錄（執行 cd ~）而後使用下面的命令進行下載：

curl -L https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz > node-v8.12.0-linux-x64.tar.xz1

執行完成後，咱們輸入 ls -al 命令，你會看到有一個 node-v8.12.0-linux-x64.tar.xz 的歸檔文件。

如今咱們下載解壓工具對歸檔進行解壓：

yum install -y xz tar

執行完成後，咱們開始解壓吧！咱們先執行 xz -d node-v8.12.0-linux-x64.tar.xz 命令，而後以前的 .xz 歸檔消失了，會多處一個 node-v8.12.0-linux-x64.tar 的歸檔文件，咱們繼續執行 tar -xvf node-v8.12.0-linux-x64.tar 就會出現一個 node-v8.12.0-linux-x64 的文件夾，這就是咱們的 Node.js 程序了！

接下來，咱們爲了統一管理，咱們將 Node 軟件放到指定位置（並非必須，而是推薦），以前咱們的軟件都放在 /usr/local 下，因此此次也同樣，咱們執行：

mv -f ~/node-v8.12.0-linux-x64 /usr/local/node

而後爲了方便咱們全局使用 node 命令進行調用，咱們須要將 /usr/local/node/bin 加入到環境變量，素以咱們使用 Vim 打開 /etc/profile 文件，在結尾追加一行：

export PATH=$PATH:/usr/local/node/bin/

加入後，咱們執行 source /etc/profile 使其生效，最後咱們輸入 node -v 你會看到下面的信息，表示已經成功：

v8.12.0

#安裝 Yarn 依賴管理工具

咱們並不推薦使用 NPM 進行依賴管理，由於開發人員在開發過程當中也是重度依賴 Yarn 進行依賴管理，咱們並不知道開發人員會搞出什麼幺蛾子，因此咱們和開發人員同樣使用 Yarn 吧！常規安裝 Yarn 較爲麻煩，可是咱們能夠利用 NPM 讓媳婦把小三抱進家裏☺️：

npm -g i yarn1

接下來，咱們運行 yarn --version 就會輸出 Yarn 的版本信息，說明咱們已經安裝完成了。

#配置 Plus SPA

好了，工具和環境都安裝完成了，咱們輸入 cd /usr/local/src/spa 回到 Plus SPA 的代碼目錄，運行下面的命令，建立咱們所須要的 .env 文件：

cat .env.example > .env1

運行完成後，咱們使用 Vim 工具進行編輯該文件，運行 vim .env 命令，編輯的內容以下：

BASE_URL=/ # 咱們假設你部署在一個域名下，因此默認 `/`, 例如你部署在子目錄下，請設置子目錄，必須以 `/` 結尾！

GENERATE_CSS_MAP=true

 

VUE_APP_ENABLE_SERVICE_WORKER=false

VUE_APP_API_HOST=http://127.0.0.1 # 咱們暫時只配置這裏，將內容修改成咱們服務器的 IP 地址（上一章咱們使用 NPM + FPM 發佈了站點的）

VUE_APP_API_VERSION=v2

VUE_APP_NAME="Plus (ThinkSNS+)"

VUE_APP_KEYWORDS="plus,web,spa,sns,think,thinksns,app,social,powerful,vue"

VUE_APP_DESCRIPTION=", built with Vue.js."

VUE_APP_ROUTER_MODE=hash

VUE_APP_THEME=src/console/theme.js

VUE_APP_EASEMOB_APP_KEY=#

VUE_APP_EASEMOB_API_URL=http://a1.easemob.com

VUE_APP_EASEMOB_ISDEBUG=false

VUE_APP_LBS_GAODE_KEY=

各個參數描述詳情清查看 slimkit/plus-small-screen-client#readme的描述

#安裝依賴

咱們使用 cd /usr/local/src/spa 進入 Plus SPA 程序目錄，這裏咱們使用 Yarn 工具進行程序的依賴安裝：

yarn install

這個過程會從國外的服務器上下載依賴包的元數據和依賴包數據，因此速度會很慢，由於 vue-cli 工具自己的依賴緣由，過程當中會出現一些 warning 開頭的警告，這不是錯誤，因此無需理會！

#子目錄發佈 SPA

子目錄發佈 H5 有一個很差的地方，就是咱們只能使用 hash 模式理由，可是咱們能夠規避跨域請求的安全限制問題，固然，想使用 history 須要對 Nginx 作特殊處理，這裏教程中並不會給出例子，由於咱們後面有獨立部署的章節，因此咱們先來看如何子目錄安裝吧。

首先咱們擬定咱們但願放置在 Plus 程序域名下的 spa 目錄下，因此，咱們從新打開 Plus SPA 的 .env 文件，而後將下面的 BASE_URL 修改成 /spa/ 這個值，修改後應該是這樣的：

BASE_URL=/spa/

修改爲功後，咱們使用 cd /usr/local/src/spa 命令進入 Plus SPA 程序目錄，而後執行蝦米啊的命令進行打包編譯：

yarn build

這個過程也是比較慢的，速度取決於你的磁盤速度。運行成功後會有相似下面的輸出：

 

接下來咱們執行下面的命令，將其編譯好的輸出軟鏈到咱們的 Plus 程序的 public 下：

ln -s /usr/local/src/spa/dist /usr/local/src/plus/public/spa1

若是你不用軟鏈，你能夠將 /usr/local/src/spa/dist 裏面的內容所有複製到 /usr/local/src/plus/public/spa 目錄下。

而後咱們如今打開你的網站，後面輸入 /spa 查看 H5 吧！大概的樣子以下：

 

#獨立域名發佈 SPA

咱們在前面的教程中安裝了 Nginx 這一節教程將指導如何在獨立域名（或者端口）進行程序的發佈，由於這裏是教程，咱們就換一個網絡端口（由於 80 端口已經被 Plus 程序佔用）進行發佈。

咱們使用 touch /usr/local/nginx/vhost/spa.conf 命令建立配置文件，而後編輯該文件，內容以下：

server {

    listen 8080; # 由於 80 端口被佔用了，因此咱們使用 8080 端口

    server_name localhost; # 若是你已經爲 SPA 分配了域名，那麼將這路的 `localhost` 替換爲域名，而後 listen 能夠繼續使用 80 端口！

    root /usr/local/src/spa/dist;

    index index.html;

 

    location / {

        try_files $uri $uri/ /index.html$is_args$args;

    }}

接下來，咱們使用 cd /usr/local/src/spa 進入 Plus SPA 目錄，編輯下面的 .env 文件，將 BASE_URL的值修改成 / 修改後的樣子：BASE_URL=/ 這樣子。將 VUE_APP_ROUTER_MODE 的值替換爲 history 修改後的樣子：VUE_APP_ROUTER_MODE=history。

而後咱們執行 yarn build 命令，等待命令執行完成。命令執行完成後，咱們使用 nginx -s reload 命令從新加載 Nginx 配置。

而後咱們在瀏覽器打開 http://你的ip:8080 看到相似於「子目錄發佈的站點了」。

#GitHub pages 發佈 SPA

首先，你須要一個 GitHub 賬號，你能夠任意建立一個空白倉庫（打開網址 https://github.com/new），建立倉庫以下截圖：

 

「Initialize this repository with a README」 必定要勾選上，由於看這個教程按照零基礎進行，若是不勾選，會多處不少後續步驟，這個大家就本身學了 Git 命令本身探索吧！

接下來，咱們使用 cd /usr/local/src/spa 進入 Plus SPA 目錄，編輯下面的 .env 文件，將 BASE_URL的值修改成 倉庫名字 修改後的樣子：BASE_URL=/spa/ (這裏的值之因此是 /spa/ 是由於咱們倉庫名字叫作 spa) 這樣子。將 VUE_APP_ROUTER_MODE 的值替換爲 history 修改後的樣子：VUE_APP_ROUTER_MODE=history。

而後咱們執行 yarn build 命令，執行完成後，咱們獲得了 dist 的文件，而後將裏面的內容上傳到你建立倉庫的 gh-pages 分支中。訪問 https://<USERNAME>.github.io/<REPO>。

<USERNAME> 是你的 GitHub 用戶名，<REPO> 是你的倉庫名稱。

#Plus 程序開啓頁面跳轉

咱們如今打開 Plus 程序的後臺頁面，而後點擊「系統設置」在「基本信息」藍中下拉，找到 「Web 終端」的設置版。首先咱們在第二項的的地方輸入 SPA 地址，輸入後開關按鈕變爲可操做狀態，而後點擊開啓，最後點擊提交便可！截圖以下：

 

全部咱們的產品體驗都在咱們的官網「免費體驗」頁面能夠找到：http://www.thinksns.com/experience.html

APP端體驗，下載新版本的朋友們，請先卸載老版本，不然沒法使用；iphone手機安裝demo前請點擊設置－通用－設備管理－信任（企業應用）

ThinkSNS(簡稱TS)，一款全平臺綜合性社交系統，爲國內外大中小企業和創業者提供社會化軟件研發及技術解決方案，目前最新系統爲ThinkSNS V4及ThinkSNS+兩個並行系統。感謝你們一致對Ts團隊和產品的支持，2018咱們在路上。

 

ThinkSNS擁有50多個功能模塊，全方位覆蓋SNS系統所需，微博（朋友圈）、即時聊天、直播、論壇、資訊、CMS、活動、頻道、圈子、問答、打賞等主流社交功能應有盡有。價格梯度多樣，根據您的項目需求靈活選型運用，支持深度靈活二次開發。

想要了解更多請聯繫：

17311245680（同微信）；028-82884828 QQ：3515923610（←源碼購買、二次開發、創業扶持、定製開發、方案策劃、開發服務等）

ThinkSNS開源用戶交流羣：143325287

 

市場合做／產品意見信箱：lihecong@zhishisoft.com

快速購買通道（微信）：