3 模块整合

作者: HapplyFox | 来源:发表于2018-04-22 18:38 被阅读4次

    一、vuex状态管理

    首先下载vuex模块

    
    npm install vuex -save
    

    1、在store文件夹下新建5个子文件
    每个文件夹的名字和内容如下所示


    store.png

    其中mutation-types.js中常量名用大写英文+下划线形式表示

    2、配置vuex全局
    vuex的全局配置与上一节中vue-router的配置相似,抽象上我们有一个store文件夹,store文件夹下内容是实现,main.js中调用实现的内容。
    我们看到import store from 'store/index' 代表引用store的index实现,在第12行中将store的实现作为参数赋值给Vue的全局配置进行使用,这样所有的页面都可以使用Vuex了。


    vuex全局.png

    二、axios 网络访问请求配置

    config目录下新建http.js,文件中设置访问baseUrl,从config/env.js中读取,可以区别运行环境和实际环境,方便发布修改网络访问。
    选用vue 2.0 推荐的的axios,扩充response拦截器和request拦截器

    request拦截器

    request拦截器判断是否存在token,如果存在在头信息的验证属性(Authorization)增加对应token值


    image.png

    response拦截器

    response拦截器,设置出错对应请求状态吗错误时,需要的判断。基础判断为401和404.

    image.png

    放置对axios的全局配置

    在main.js中配置Axios的全局


    image.png

    三、moment 时间转换组件

    时间组件使用moment.js
    官网:http://momentjs.cn/

    项目整合方式:
    1、控制台输入命令 npm install moment --save ,将moment包引入文件
    2、进入src/main.js主目录,编辑一下代码,引用成功


    moment.png

    四、Fastclick整合

    1、首先安装fastclick依赖
    2、输入命令:yarn add fastclick
    进入项目目录src/main.js进行如下操作


    fastclick.png

    相关文章

      网友评论

        本文标题:3 模块整合

        本文链接:https://www.haomeiwen.com/subject/kumclftx.html