模板项目技术栈
- vue-cli3脚手架
- vue-router
- vuex跨组件通信
- rem适配
- axios拦截器
- token
- Promise
- vant-ui
模板项目源码地址
核心知识体系简介
- vue-cli3脚手架
- 创建项目
- 开发环境和生产环境配置
- vue-router路由
- 路由配置
- 子路由配置
- 路由守卫,设置页面标题和根据登录状态判断是否允许进入特定页面
- vuex跨组件通信
- vuex配置
- vuex持久化
- vuex使用
- rem移动端适配
- 通过amfe-flexibe设置root元素的字体大小
- 通过pxtorem把px转成rem,无需手动书写rem
- axios配置
- 使用拦截器配置baseURL和给请求头加上token
- 使用拦截器对返回的数据进行处理
- 挂载到vue原型上,方便使用
- promise使用
- 在项目中使用async await把异步变成同步,编写和阅读更舒服
- 有赞vant-ui库
- 导航栏
- 单元格
- loading
- ......
vue-cli3脚手架
- 具体操作,请移步vue-cli3文档官网
- 开发环境和生产环境配置
-
根目录新建两文件 .env.development => 开发环境配置 .env.production => 生产环境配置
image.png
文件内容
// .env.development
VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"
// .env.production
VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"
-
package.json配置
vue-cli3默认已经给你配置好了model, 开发环境对应development, 生产环境对应production,如果你不知道model,请移步webpack文档官网
image.png
-
在你的项目中,通过 process.env.VUE_APP_URL 可以访问到你在环境配置文件中设置的变量
开发环境中的变量
vue-router路由
这里主要讲一下路由守卫的配置,先上图
路由配置
下面是路由守卫配置
路由守卫
vuex跨组件通信
-
项目中有以下几个地方用到了vuex
- 设置登录状态
- 设置用户名
- 保存token
-
以登录为里,做个简单说明
登录成功时,修改登陆状态为true
image.png
退出登录时,修改登录状态为false
-
获取store中state设置的变量通过mapGetters,看图
在模板中使用
-
vuex持久化
- 使用vuex-persistedstate插件对vuex的状态持久化
- 等你的页面刷新时,状态依然存在
-
本质上是这个插件帮你把状态都存到了localStorage
配置方法,以下是最简单的配置
使用了vuex-persistedstate插件后,store里的状态都存到了localStorage
image.png
rem移动端适配
适配原理我就不多说了,不清楚请看我的另外一篇文章[用rem编写移动端自适应网页]https://www.jianshu.com/p/91ac1690be89,这里说一下在vue-cli3中是如何配置的
- 安装 amfe-flexible插件
npm i amfe-flexible --save-dev -
在main.js中导入
ipone6
-
此时你的应用的html会自动根据手机的尺寸设置了font-size,如图
-
配置pxtorem插件,能帮你自动把rem转成px,具体配置如下,在项目根目录下的vue.config.js(没有则新建)
里进行配置,如图
axios配置
- axios拦截器
能帮我们对数据进行一些统一的处理,比如后台给我们的数据里都是把数据包在data对象里面,而使用axios,则又会再用data把返回的数据再包一层,如果不统一处理以下,用起来很不爽. -
设置请求头,后台识别用户经常使用token,我们登陆的时候能拿到后台返回的token,然后存入store里,当我们发送请求时,我们可以给请求头统一加上token,如图
- 把axios的实例挂载到vue的实例上
发请求的时候,只需要使用this.axios.post就行了,是不是很方便
Promise的使用
promise是个好东西,可以把异步变同步,在项目中使用async await编写代码,那叫一个爽,具体用法如下:
有赞vant-ui库
有赞是搞电商开发的,在公众号和小程序模板界算是做得比较不错的,vant-ui是他们开源出来的一个ui库,同时他们还有小程序的ui库,感兴趣的小伙伴可以去[看看]https://youzan.github.io/vant/
后记
本文章纯手打,下午学生在做项目,个个入了魔,所以基本都没来打扰我,从下午2:00到5:30分,花了3个半钟总结了这篇文章,没来得检查错别字就发布了,有手误请包涵.
顺便打个广告: 本人任职于龙岗的一家培训机构 [点时创新],上面所记是我们的课程培训内容之一,有想转行学web前端的可以联系我,下面是我们的课程大纲,持续更新中,在本届所带学生中,将会加上koa和ssr的内容.
网友评论