移动端vue项目模板

Posted 2020-12-11 xiaoxiao95

模板项目技术栈

• vue-cli3脚手架
• vue-router
• vuex跨组件通信
• rem适配
• axios拦截器
• token
• Promise
• vant-ui

核心知识体系简介

1. vue-cli3脚手架
   • 创建项目
   • 开发环境和生产环境配置
2. vue-router路由
   • 路由配置
   • 子路由配置
   • 路由守卫,设置页面标题和根据登录状态判断是否允许进入特定页面
3. vuex跨组件通信
   • vuex配置
   • vuex持久化
   • vuex使用
4. rem移动端适配
   • 通过amfe-flexibe设置root元素的字体大小
   • 通过pxtorem把px转成rem,无需手动书写rem
5. axios配置
   • 使用拦截器配置baseURL和给请求头加上token
   • 使用拦截器对返回的数据进行处理
   • 挂载到vue原型上,方便使用
6. promise使用
   • 在项目中使用async await把异步变成同步,编写和阅读更舒服
7. 有赞vant-ui库
   • 导航栏
   • 单元格
   • loading
   • ......

vue-cli3脚手架

1. 具体操作,请移步vue-cli3文档官网
2. 开发环境和生产环境配置

• 根目录新建两文件 .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"

3. package.json配置
   vue-cli3默认已经给你配置好了model, 开发环境对应development, 生产环境对应production,如果你不知道model,请移步webpack文档官网
   
    

   

   image.png

4. 在你的项目中,通过 process.env.VUE_APP_URL 可以访问到你在环境配置文件中设置的变量

   
   
    

   

    
   
   
    

   

   开发环境中的变量

vue-router路由

这里主要讲一下路由守卫的配置,先上图

 

路由配置

下面是路由守卫配置

 

路由守卫

vuex跨组件通信

1. 项目中有以下几个地方用到了vuex

   • 设置登录状态
   • 设置用户名
   • 保存token

2. 以登录为里,做个简单说明

   
   
    

   

    
   
   

   登录成功时,修改登陆状态为true

   
   
    

   

   image.png
   
   退出登录时,修改登录状态为false
   
    

   

    

3. 获取store中state设置的变量通过mapGetters,看图

   
   
    

   

    
   
   
    

   

   在模板中使用

4. vuex持久化

   • 使用vuex-persistedstate插件对vuex的状态持久化
   • 等你的页面刷新时,状态依然存在

   • 本质上是这个插件帮你把状态都存到了localStorage
     配置方法,以下是最简单的配置

     
     
      

     

      
     
     

     使用了vuex-persistedstate插件后,store里的状态都存到了localStorage

     
     
      

     

     image.png

rem移动端适配

适配原理我就不多说了,不清楚请看我的另外一篇文章[用rem编写移动端自适应网页]https://www.jianshu.com/p/91ac1690be89,这里说一下在vue-cli3中是如何配置的

1. 安装 amfe-flexible插件 npm i amfe-flexible --save-dev

2. 在main.js中导入

   
   
    

   

   ipone6

3. 此时你的应用的html会自动根据手机的尺寸设置了font-size,如图

   
   
    

   

    
   
   
    

   

    

4. 配置pxtorem插件,能帮你自动把rem转成px,具体配置如下,在项目根目录下的vue.config.js(没有则新建)
   里进行配置,如图

   
   
    

   

    

axios配置

1. axios拦截器
   能帮我们对数据进行一些统一的处理,比如后台给我们的数据里都是把数据包在data对象里面,而使用axios,则又会再用data把返回的数据再包一层,如果不统一处理以下,用起来很不爽.

2. 设置请求头,后台识别用户经常使用token,我们登陆的时候能拿到后台返回的token,然后存入store里,当我们发送请求时,我们可以给请求头统一加上token,如图

   
   
    

   

    
3. 把axios的实例挂载到vue的实例上
   
    

   

    
   
   发请求的时候,只需要使用this.axios.post就行了,是不是很方便
   
    

   

    

Promise的使用

promise是个好东西,可以把异步变同步,在项目中使用async await编写代码,那叫一个爽,具体用法如下:

 

 

有赞vant-ui库

有赞是搞电商开发的,在公众号和小程序模板界算是做得比较不错的,vant-ui是他们开源出来的一个ui库,同时他们还有小程序的ui库,感兴趣的小伙伴可以去[看看]https://youzan.github.io/vant/

模板项目源码地址

作者：胡儒清_前端那个老胡
链接：https://www.jianshu.com/p/a9401aa5219c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。