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 模块整合

    一、vuex状态管理 首先下载vuex模块 1、在store文件夹下新建5个子文件每个文件夹的名字和内容如下所示 ...

  • Flutter布局尝试

    官方的例子实现 1. 实现图片模块 2. 实现标题模块 3. 实现按钮模块 4. 实现正文模块 5. 整合所有模块...

  • 3.28  嵌入式

    今天重新调整了语音模块,继续整合温湿度显示模块和触摸屏模块。

  • springboot 集成 druid

    SpringBoot整合Druid完成MySQL数据访问,以及配置Druid监控模块整合。 添加Druid依赖

  • 大纲

    目录结构 1.框架基础搭建2.框架目录结构3.模块整合4 登陆认证模块配置5.Vue开发问题整理 自述 最近时间相...

  • Python和C++语言的整合

    利用 ctypes 模块整合 Python 程序和 C 程序ctypes 模块ctypes 是 Python 的一...

  • python接口自动化—mock模块的基本使用

    一、mock简介 mock原是python的第三方库 python3以后mock模块已经整合到了unittest测...

  • 手写框架探险系列-confin2的BeanHelper和spri

    apache BeanHelper源码解析 在编写config模块中,需要把apache的config2模块整合,...

  • 11.8学习总结

    今天上午我将语音模块和温湿度传感器模块整合到了一起,刚刚整合的时候温湿度可以显示出来,但是语音模块不好使,怎么才...

  • springmvc框架

    springmvc是spring框架的一个模块,springmvc和spring无需通过中间整合层进行整合。spr...

网友评论

    本文标题:3 模块整合

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