一、vuex状态管理
首先下载vuex模块
npm install vuex -save
1、在store文件夹下新建5个子文件
每个文件夹的名字和内容如下所示
![img_b1b8b89bba199c1a2e0eebc612bd2346.png](https://i-blog.csdnimg.cn/blog_migrate/ea7d98895bd2a74492cee8026cecb37e.png)
其中mutation-types.js中常量名用大写英文+下划线形式表示
2、配置vuex全局
vuex的全局配置与上一节中vue-router的配置相似,抽象上我们有一个store文件夹,store文件夹下内容是实现,main.js中调用实现的内容。
我们看到import store from 'store/index' 代表引用store的index实现,在第12行中将store的实现作为参数赋值给Vue的全局配置进行使用,这样所有的页面都可以使用Vuex了。
![img_60cfdded61cd857c093ce024b3599adc.png](https://i-blog.csdnimg.cn/blog_migrate/5b9319327c8b142cca0dfb4a945abf32.png)
二、axios 网络访问请求配置
config目录下新建http.js,文件中设置访问baseUrl,从config/env.js中读取,可以区别运行环境和实际环境,方便发布修改网络访问。
选用vue 2.0 推荐的的axios,扩充response拦截器和request拦截器
request拦截器
request拦截器判断是否存在token,如果存在在头信息的验证属性(Authorization)增加对应token值
![img_79dcddc5ad029d889641afdb3d01c08e.png](https://i-blog.csdnimg.cn/blog_migrate/3bb79677eee27e59d7d175bd0708e908.png)
response拦截器
response拦截器,设置出错对应请求状态吗错误时,需要的判断。基础判断为401和404.
![img_6b403c013ea4005760ef59139bd66ba6.png](https://i-blog.csdnimg.cn/blog_migrate/e6a927d635831bda45e52a0e5325dad2.png)
放置对axios的全局配置
在main.js中配置Axios的全局
![img_2a2cb705b2291a99ac2adbce590f680e.png](https://i-blog.csdnimg.cn/blog_migrate/e3313e85b4b4fc4a6f19779afbbcea9f.png)
三、moment 时间转换组件
时间组件使用moment.js
官网:http://momentjs.cn/
项目整合方式:
1、控制台输入命令 npm install moment --save ,将moment包引入文件
2、进入src/main.js主目录,编辑一下代码,引用成功
![img_d33757e254ae8c62c590f1adea1cd781.png](https://i-blog.csdnimg.cn/blog_migrate/7b354f8e5816b83d35e40c8ff360b95c.png)
四、Fastclick整合
1、首先安装fastclick依赖
2、输入命令:yarn add fastclick
进入项目目录src/main.js进行如下操作
![img_0a902a60484cb0e38d647849fcb51b36.png](https://i-blog.csdnimg.cn/blog_migrate/cf007b1d901d45724a231ea8c2b83f9f.png)