Sublime Text
Chrome浏览器调试
打开命令提示行，进入项目目录“D:\phpStudy\WWW\study\Vue”，然后执行命令“vue init webpack service_view”,执行效果如下图（每一项的数据输入可根据实际情况进行调整）：
生成工程包成功后，执行命令“cd service_view”切换目录后，再执行命令“npm run dev”启动项目，执行效果如下图1： Tips：执行命令“npm run dev”之前，该项目需要安装以下组件包： 1.执行下图2的三个命令，element-ui用于vue的UI框架 ，axios是一个基于promise的HTTP 库； 2.安装样式加载器npm i css-loader node-sass sass-loader vue-loader vue-style-loader style-loader less less-loader --s。
启动成功后，浏览器输入地址“http://localhost:8080/”打开页面，显示效果如下图（证明工程创建成功）：
文件index.html增加以下两点： 1.“”解决网页图标问题； 2.增加style里面的css样式，用于全局（由于使用iframe需要使用这些样式，可根据实际项目情况调整）。
文件main.js代码如下图（分析重点代码）： 1.引入组件“element-ui”，这里是全部引入，可根据实际情况引入相应的组件，有利于提高速度；利用该组件的Message新建全局提示信息框方法hint； 2.引入富文本组件“vue-quill-editor”（需先执行命令npm install vue-quill-editor --save）,并且要引入相关的样式（quill/dist/xx），不然会导致富文本显示错乱； 3.利用router.beforeEach修改跳转到页面的title，方便查看title就知道当前属于那个页面（后面注意添加next()）； 4.新增方法refresh，根据n的值返回相应的页面（0为刷新当前页面）。 Tips：注意这里引入状态管理store，用于存储接口获取到的数据和多组件同时用到的值。
文件App.vue代码如下图（比较简单，可自行查看代码）：
文件index.js代码如下图（分析重点代码）： 1.新增懒加载引入组件的方法_import_，比直接引入组件的好处是当你访问到这个页面的时候才会去加载相关组件，这样的话能提高页面的访问速度； 2.每个路由下面的“meta--title”用于显示页面title的信息； 3.为了是使URL像正常的URL，需要配置路由模式“mode: 'history'”，去掉URL中的#。
文件store.js、getters.js和article.js代码如下图（分析重点代码）： 1.使用分模块modules，当项目模块很多时，有利于使得结构更清晰，方便管理； 2.getters状态获取，是store的计算属性。 Tips：文件article这里不做展开，后面根据实例一起分析。
该方法存放三种存储数据的方法，代码如下图，可根据实际情况引入。
该方法存放调用接口的方法，代码如下图（分析重点代码）： 1.引入框架“element-ui”中的“Loading”，来定义请求时的加载效果（startLoading），可根据实际情况调整里面的属性； 2.配置请求拦截器“axios.interceptors.request”和响应拦截器“axios.interceptors.response”，用于请求前和响应前的拦截处理； 3.HTTP方法为post，请求数据一定要用“qs.stringify”处理，不然会报错。
该方法存放一些简单的方法，代码如下图： 1）toDate方法主要是把传入的时间参数转为所需要的格式“2019-08-31”，可根据实际情况自行调整； 2）diffTime方法主要是计算传入的时间参数跟现在时间的差值，并转化为时分秒格式。
存放富文本的配置文件，代码有详细的备注信息，可根据实际的项目情况修改配置。 Tips：注释掉的功能不显示，去掉注释则可以显示使用。
template和style代码如下图（1-3），最终显示效果如下图（4）： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Input 输入框和Button 按钮）； 2.style样式使用less编写。 Tips：由于找回页面、个人信息页和用户页面不是该系列的必需页面，可仔细参考文章《Express+MongoDB+Vue实现后台网站》和《Express+MongoDB+Vue实现后台网站八》。
script代码如下图（分析重点代码）： 1.方法userLogin： 1）先分别校验用户名和密码是否为空，为空则不执行下面代码并焦点定位到对应字段； 2）校验通过则调用接口“users/login”，传参用户名和密码，如果res.status为1（1为服务器定义数字），则显示错误信息（调用全局方法hint提示服务器返回的错误信息）；不为1则跳到首页，并存储数据“token”、“username”和“_id”，用于登录后页面操作校验的依据； 2.另外一个比较复杂的方法就是按键盘“Enter”相当于点击登录按钮，登录按钮增加属性“v-on:keyup.13.native="submit"”，加载（mounted）时增加图中的代码，键盘Enter事件“submit”增加调用登录的方法“this.userLogin()”。
实现后台页面结构之前，需要先实现登录页面、找回密码、个人设置和用户页面的相关功能，但由于跟系列《Express+MongoDB+Vue实现后台网站》一模一样，这里不作重复的分析，可自行查看。 使用iframe，因为只需局部刷新，有利于提高用户体验。 template和style代码如下图： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Container 布局容器和NavMenu 导航菜单）； 2.style样式使用less编写。
script代码如下图（分析重点代码）： 1.方法exitOperation用来判断点击“退出”情况： 1）如果点击“是”，则退出系统跳到登录页面，并清除存储信息； 2）如果点击“否”，则返回页面； 2.调用created时，里面有个token判断，存在则存储信息；不存在则跳到登录页面（解决直接复制首页地址进行访问，而未经过登录操作）； 3.调用mounted里面有个“监听浏览器回退事件”，为了避免首页回退到登录页面，又返回首页问题；注意调用destroyed进行销毁。
template和style代码如下图： 1.template中“el-”开头的标签都是来自“element-ui”框架，详细可查看api（主要使用Layout 布局和Table 表格）； 2.style样式使用less编写。
script代码如下图（分析重点代码）： 调用created主要是为了获取数据对表格进行渲染： 1）获取存储的数据token、username和id； 2）判断token不存在则不执行下面代码，并跳到登录页面（解决页面太长时间不操作失效的问题）； 3）token存在则执行this.$store.dispatch('getArticleList', data)，用于调用store-article的方法getArticleList，该方法主要使用传入的参数data获取到文章列表的数据list（注意createTime使用switchTimeFormat.toDate精确到天；articleImg使用JSON.parse转为对象，因为保存时候转化为字符串；articlePraiseList使用switchTimeFormat.diffTime计算出差值），然后执行commit('GETARTICLELIST', articles)，并利用mutations的方法GETARTICLELIST修改状态（state.articlesList和state.totalNumber）。 4）第三步执行成功后，执行语句this.list = this.articlesList.slice(0, 6)，过滤只显示前六条数据（this.articlesList对应到...mapGetters的articlesList，而articlesList是文件getters的状态获取）。 Tips： 1.articles/getArticlesList是服务器接口，具体可查看服务器文章。