vue 浙里学车app嵌套vue

启动项目

1. npm i 安装依赖
2. npm run serve 启动项目
3. cd server (接口目录)
4. npm i
5. npm run dev

前言

花了半天的时间整理了一个 vue 移动端项目的模板，希望多还不熟悉 vue 项目搭建的小伙伴有些帮助，也欢迎各路大神提出宝贵的建议，本文章默认你已经对 webpack 和 vue 有一定的了解。

核心知识体系简介

1. vue-cli3 脚手架

   • 创建项目
   • 开发环境和生产环境配置
   • 配置跨域

2. vue-router 路由

   • 路由配置
   • 子路由配置
   • 路由守卫，设置页面标题和根据登录状态判断是否允许进入特定页面
   • 对router-link使用active-class,高亮当前路由

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
   • ......

8. 使用keep-alive组件缓存某些组件(新增)

9. 添加小型服务器接口,用来编写本项目所需接口

项目目录

project1 行有所畅H5 project2 学车H5 project3 适老版H5