本章概述
本章对项目目录进行更深一步的解释，并对目录内的基本文件进行一些简单的编辑。
包括axios，router，Vuex的初步讲解。
底层文件编辑
首先我们把上一章最后的目录图贴上，如图2-1。
图2-1.项目目录
然后我们应该编辑下App.vue，main.js，index.html。
本次App.vue中如图2-2先留一个router-view即可，有很多项目会在App.vue中添加页面刷新函数，页面loading蒙版等，但是我更喜欢尽量简化App.vue与index.html，只把这两个文件作为简单的容器使用 。在style标签内通过图中的形式可导入初始化样式（初始化样式旨在清除浏览器默认样式，提高网站兼容性，如果还没形成自己的习惯样式，并且也没有企业规定样式，那么可以百度挑选一个合适初始化样式导入），具体怎么写初始化样式不解释了。在script标签中可以写全局函数。有的项目会定义路由刷新函数就是在这里，本次我没有使用。
图2-2.App.vue
main.js中如图2-3，主要通过import导入包，通过Vue.prototype定义全局可调用变量。这里我们导入了路由管理（router），新定义请求（axios），全局数据存储（store）以及全局工具js（common.js）并且可以使用router的钩子函数在每个路由跳转前验证登录是否登录。验证登录这部分我们可以先不写，或者注释掉，因为现在还没与做登录信息，我们会被这个方法强制跳转到login的路由下。
图2-3.main.js
静态config.js的引入与使用
项目发布需要npm打包然后上传到服务器上，如果没有一个静态的单配置文件，那么我们每次修改一些属性都必须重新打包上传，这样对资源和时间都是一种浪费。因此我们需要一个单独的不打包的文件，控制一些简单的属性。这样我们只更新这个文件就可以完成一些预设的操作。比如系统维护状态，下面以此举例。
index.html如图2-4，定义meta，title并导入静态配置文件config.js
图2-4.index.html
config.js如图2-5-1，写一些系统配置，我写了是否维护中maintenance，与维护提示信息maintenanceTips两个属性
图2-5-1.congif.js
现在我们就可以在Vue文件中直接使用这些配置属性了，如图2-5-2
图2-5-2.config配置数据使用
在页面加载后先判断config中的maintenance属性的真假，如果为真那么就是维护状态，我们可以通过赋值控制蒙版显示的属性为真，来使提示维护信息的蒙版显示，否则隐藏。提示信息的内容根据另一个属性maintenanceTips传递进来，提示文本显示该属性的值。
axios定向工具化
由于vue-resource已经停止维护了，现在一般使用axios向后台发送请求并接收后台数据。axios.js 内容如图2-6,2-7,2-8，内容过多，我会在Axios的使用与分化-3中详细解释，完整版代码可以在之后到gitee中查看，连载到到git篇时我会放出模板项目的链接。重新定义后的axios应该尽可能包含多中情况，减少公共文件外的代码量。本项目目前包含提交JSON字符串数据，提交formdata数据，返回blob的处理等情况。
图2-6为初始化两种axios，分别为提交JSON型字符串的形式，与提交formdata的形式。
图2-6.初始化两种axios
图2-7为提交JSON字符串请求数据的一种具体方法，方法内处理了未登录时跳转登录也，登录后跳回，以及系统异常时错误提示。
图2-7.一种方法举例
图2-8为公共化，使其他模块可以调用。
图2-8.export
router路由控制
./router/index.js如图2-9，通过import导入Vue文件，然后通过下图的方式注册路由，然后我们通过http://localhost:8080/#/xxxxxxxxxxxxxxxx（这里是我们定义的路由path）就可以访问对应的页面了。在后面的章节（预计第四章）我准备介绍另第二种路由编辑方式，并且也将以第二种为主。
图2-9.index.js
全局数据Vuex
Vuex就是一种全局数据存储工具，也可以帮助我们完成组件之间的数据传输。本项目中Vuex的store将主要做全局数据存取，基本不参与组件之间数据传递，组件之间的数据传递更推荐大家按照Vue说明文档的方式来编辑。 ./store/store.js如图2-10，state中为初始化的数据键值对，mutations中含有全局数据赋值方法。
图2-10.store.js
我们可以使用图2-11-1的方式来取出Vuex的全局数据，Vue文件可以直接通过this.userInfo使用该数据，通过2-11-2的方式来存储更新全局数据。之后的章节有准备做更详细的全局数据与js工具的详解。
图2-11-1.取出全局数据
图2-11-2.存储更新全局数据
网友评论