码迷,mamicode.com
首页 > 移动开发 > 详细

移动端vue项目模板

时间:2020-06-21 11:35:48      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:阅读   cti   rom   comment   原型   持久化   product   token   适配   

模板项目技术栈

  • 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"
  1. package.json配置
    vue-cli3默认已经给你配置好了model, 开发环境对应development, 生产环境对应production,如果你不知道model,请移步webpack文档官网
     
    技术图片
    image.png
  2. 在你的项目中,通过 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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

移动端vue项目模板

标签:阅读   cti   rom   comment   原型   持久化   product   token   适配   

原文地址:https://www.cnblogs.com/xiaoxiao95/p/13171561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!