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 的应用即可。

#下载程序

在前面的教程中，我们在CentOS7.4的服务器中已经安装可 Git 软件，如果你是直接跳过来看 SPA 安装教程的，请在 CentOS 中运行下面的命令安装，如果你不是 CentOS 系统，请自行从 Git 官网安装，命令如下：

yuminstall-ygit

我们的SPA 代码存放在slimkit/plus-small-screen-client」。

现在，我们进入CentOS 中，然后按照之前安装 Plus 的惯例，我们将程序代码存放在/usr/local/src目录中，所以我们执行cd /usr/local/src即可进入该目录，然后我们执行下面的命令：

gitclone https://github.com/slimkit/plus-small-screen-client spa&&cdspa

执行完成你，你可以执行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的归档文件。

现在我们下载解压工具对归档进行解压：

yuminstall-y xztar

执行完成后，我们开始解压吧！我们先执行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文件，在结尾追加一行：

exportPATH=$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 工具进行程序的依赖安装：

yarninstall

这个过程会从国外的服务器上下载依赖包的元数据和依赖包数据，所以速度会很慢，因为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{

listen8080;# 因为 80 端口被占用了，所以我们使用 8080 端口

server_namelocalhost;# 如果你已经为 SPA 分配了域名，那么将这路的 `localhost` 替换为域名，然后 listen 可以继续使用 80 端口！

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

indexindex.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、活动、频道、圈子、问答、打赏等主流社交功能应有尽有。价格梯度多样，根据您的项目需求灵活选型运用，支持深度灵活二次开发。