移动端vue项目模板

时间：2024-02-24 18:21:40

模板项目技术栈

  • 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.get或者this.axios.post就行了,是不是很方便
     
     

Promise的使用

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


 
 

有赞vant-ui库

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

模板项目源码地址



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

相关文章