关于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

快速购买通道（微信）：