3 模块整合

一、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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Linux命令(面试+工作版)

Linux命令(面试+工作版) ? ? ? ? ? ? ? 1. tar 创建一个新的tar文件 ? 解压tar文件 ? 查看tar文件 ? 2. grep 在...

50740
来自专栏分享达人秀

JDK的正确安装和配置

JDK的全称是Java Development Kit,翻译成中文就是Java开发工具包,主要包括Java运行环境、一些Java命令工具和Java基础的...

24460
来自专栏闵开慧

eclipse中执行程序显示找不到主类

eclipse中执行程序显示找不到主类 这种情况一般出现在工程中已编译有class文件的java文件,而后面新建的java则不会出现问题。这种情况说明工程bin...

37750
来自专栏前端小叙

wordpress主题升级之后返回到原来版本主题的方法

wordpress后台经常可以看到主题提示升级,但是发现升级之后样式,颜色等都变了,不是以前的样子了,这时候如果想要返回到以前版本,前提,必须以前版本有备份。

12520
来自专栏FreeBuf

Subfinder:一个子域名发现工具,可以为任何目标枚举海量的有效子域名

SubFinder是一个子域发现工具,可以为任何目标枚举海量的有效子域名。它已成为sublist3r项目的继承者。SubFinder使用被动源,搜索引擎,Pas...

14100
来自专栏黑泽君的专栏

Linux常用的服务器构建

FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。

16820
来自专栏spring源码深度学习

linux环境更新默认python2.7为python3.X

一般的linux系统都会自带python环境,默认都是python2.7,但是python2.7已经不开源,不维护了,并且python3已经成为主流。学习pyt...

70820
来自专栏企鹅号快讯

MongoDB副本集搭建

我们之前的案例都是在单个节点上实现的,在生产环境中这种做法是有风险的,如果服务宕机、崩溃或者硬盘坏了都会对公司业务造成损失,因此我们需要数据备份。在MongoD...

47370
来自专栏一枝花算不算浪漫

[Linux基础]Linux基础知识入门及常见命令.

42870
来自专栏无所事事者爱嘲笑

vscode eslint配置vue遇到的问题

42320

扫码关注云+社区

领取腾讯云代金券