H5是HTML5的缩写，也代表着新的浏览器技术和标准，比如一些高级浏览器支持的一些HTML5标准API什么是SPA单页Web应用（单页Web应用程序，SPA)，是一种只有一个网页的应用程序。单页应用程序(SPA)是一种Web应用程序，它加载单个HTML页面并在用户与应用程序交互时动态更新该页面。浏览器最初加载必要的HTML、CSS和JavaScript，所有操作都在这个页面上完成，全部由JavaScript控制。因此，模块化的开发设计对于单页应用来说非常重要。解释参考：·SPA·百度百科·单页应用·维基百科介绍PlusSmallScreenWebClient（以下简称PlusSPA）是一个使用Vue.js、ES+等现代Web技术构建和编写的Web单页应用。它的纯前端代码让PlusSPA可以分布到网络的各个地方，你甚至可以嵌入设备在本地运行，只要你有一个可以渲染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进入该目录，然后我们执行下面的命令:gitclonehttps://github.com/slimkit/pl...spa&&cdspa执行完成，可以执行pwd可以看到你当前位置是/usr/local/src/spa，这是我们的代码位置。安装Node.js，我们打开Node.js官网下载页面，默认选择LTS版本。目前，我这里的最新版本是8.12.0版。我们在页面上找到了LinuxBinaries(x86/x64)这一行。我这里的系统是65位所以我点击这一行的64位按钮，你有你的系统选择。不清楚的请看下图：从上图中，我需要右击64位，选择“复制链接地址”，得到一个类似https://nodejs.org/dist/v8的地址。12...我们现在回到服务器主目录（执行cd~），使用如下命令下载：curl-Lhttps://nodejs.org/dist/v8.12...>node-v8.12.0-linux-x64。tar.xz1执行完成后，我们输入ls-al命令，会看到一个node-v8.12.0-linux-x64.tar.xz的归档文件。现在我们下载解压工具对压缩包进行解压：yuminstall-yxztar执行完成后开始解压！我们先执行xz-dnode-v8.12.0-linux-x64.tar.xz命令，然后之前的.xz存档就消失了，会多出一个node-v8.12.0-linux-x64.tar存档文件，我们继续执行tar-xvfnode-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.0installYarn依赖管理工具我们不推荐使用NPM来进行依赖管理，因为开发者在开发过程中也非常依赖Yarn来进行依赖管理，我们不知道开发者会搞什么鬼，所以尽量使用Yarn开发商！常规安装Yarn比较麻烦，但是我们可以使用npm让媳妇带小三进屋??:npm-giyarn1接下来我们运行yarn--version会输出Yarn的版本信息，表明我们已经完成安装。配置PlusSPA，工具和环境都安装好了，我们输入cd/usr/local/src/spa回到PlusSPA的代码目录，运行如下命令创建我们需要的.env文件：cat.env运行后.example>.env1，我们使用Vim工具编辑该文件，运行vim.env命令，编辑后的内容如下：BASE_URL=/#我们假设你部署在一个域名下，所以默认是/，比如你部署在子目录下，请设置子目录，必须以/结尾！GENERATE_CSS_MAP=trueVUE_APP_ENABLE_SERVICE_WORKER=falseVUE_APP_API_HOST=http://127.0.0.1#我们这里只是临时配置，修改内容为我们服务器的IP地址（上一章我们使用NPM+FPM发布站点）VUE_APP_API_VERSION=v2VUE_APP_NAME="Plus(ThinkSNS+)"VUE_APP_KEYWORDS="plus,web,spa,sns,think,thinksns,app,social,powerful,vue"VUE_APP_DESCRIPTION=",builtwithVue.js."VUE_APP_ROUTER_MODE=hashVUE_APP_THEME=src/console/theme.jsVUE_APP_EASEMOB_APP_KEY=#VUE_APP_EASEMOB_API_URL=http://a1.easemob.comVUE_APP_EASEMOB_ISDEBUG=falseVUE_APP_LBS_GAODE_KEY=各个参数的详细说明请查看slimkit/plus-small-screen-client的说明#readme安装依赖我们使用cd/usr/local/src/spa进入PlusSPA程序目录，这里我们使用Yarn工具安装程序的依赖：yarninstall的过程会从国外服务器下载依赖包的元数据和数据，所以速度会很慢，因为vue-cli工具本身的依赖，过程中会出现一些以warning开头的警告，不是错误，忽略即可！儿子在SPA子目录下发布H5的一个缺点就是只能使用hash方式，但是可以避开跨域请求的安全限制。当然，如果要使用history，需要对Nginx做特殊处理。本教程中不举例，因为后面会有独立的部署章节，所以我们先看看如何安装子目录。首先，我们计划要放在Plus程序域名下的spa目录下，所以我们重新打开PlusSPA的.env文件，然后将下面的BASE_URL修改为/spa/的值。修改后应该是这样的：BASE_URL=/spa/修改成功后，我们使用cd/usr/local/src/spa命令进入PlusSPA程序目录，然后执行虾米的命令进行打包和compile:yarnbuild也是一个比较慢的过程，快慢取决于你的磁盘速度。运行成功后，会有类似如下的输出：接下来我们执行如下命令将编译后的输出软链接到我们的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查看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进入PlusSPA目录，编辑下面的.env文件，将BASE_URL的值修改为/，修改后：BASE_URL=/这样。将VUE_APP_ROUTER_MODE的值替换为修改后的历史：VUE_APP_ROUTER_MODE=history。然后我们执行yarnbuild命令并等待命令完成。命令执行完成后，我们使用nginx-sreload命令重新加载Nginx配置。然后我们在浏览器中打开http://你的ip:8080，看到类似“子目录发布的站点”这样的东西。GitHubpages发布SPA首先需要一个GitHub账号，可以随意创建一个空白仓库（打开网址https://github.com/new），创建仓库如下图所示：“InitializethisrepositorywithaREADME》一定要先勾选，因为本教程是零基础，如果不勾选，后续步骤会比较多，大家可以自己学习Git命令，自己摸索！接下来，我们使用cd/usr/local/src/spa进入PlusSPA目录，编辑下面的.env文件，将BASE_URL的值改为修改后的仓库名：BASE_URL=/spa/（这里的值为It是/spa/因为我们仓库的名字叫spa)像这样。将VUE_APP_ROUTER_MODE的值替换为修改后的历史：VUE_APP_ROUTER_MODE=history。然后我们执行yarnbuild命令。执行完成后，我们得到dist文件，然后将内容上传到你创建的仓库的gh-pages分支。访问https://
