vue | 您所在的位置:网站首页 › vue开发移动端项目 › vue |
vue 移动端模板
启动项目
npm i 安装依赖
npm run serve 启动项目
cd server (接口目录)
npm i
npm run dev
前言
花了半天的时间整理了一个 vue 移动端项目的模板,希望多还不熟悉 vue 项目搭建的小伙伴有些帮助,也欢迎各路大神提出宝贵的建议,本文章默认你已经对 webpack 和 vue 有一定的了解。 核心知识体系简介vue-cli3 脚手架 创建项目 开发环境和生产环境配置 配置跨域vue-router 路由 路由配置 子路由配置 路由守卫,设置页面标题和根据登录状态判断是否允许进入特定页面 对router-link使用active-class,高亮当前路由vuex 跨组件通信 vuex 配置 vuex 持久化 vuex 使用rem 移动端适配 通过 amfe-flexibe 设置 root 元素的字体大小 通过 pxtorem 把 px 转成 rem, 无需手动书写 remaxios 配置 使用拦截器配置 baseURL 和给请求头加上 token 使用拦截器对返回的数据进行处理 挂载到 vue 原型上,方便使用promise 使用 在项目中使用 async await 把异步变成同步,编写和阅读更舒服有赞 vant-ui 库 导航栏 单元格 loading ......使用keep-alive组件缓存某些组件(新增) 添加小型服务器接口,用来编写本项目所需接口 vue-cli3 脚手架 具体操作,请移步vue-cli3文档官网 开发环境和生产环境配置 根目录新建两文件 .env.development => 开发环境配置 .env.production => 生产环境配置![]() ![]() ![]() ![]() 这里主要讲一下路由守卫的配置,先上图
项目中有以下几个地方用到了 vuex 设置登录状态 设置用户名 保存 token以登录为里,做个简单说明
获取 store 中 state 设置的变量通过 mapGetters, 看图
vuex 持久化 使用 vuex-persistedstate 插件对 vuex 的状态持久化 等你的页面刷新时,状态依然存在 本质上是这个插件帮你把状态都存到了 localStorage 配置方法,以下是最简单的配置![]() ![]() 适配原理我就不多说了,不清楚请看我的另外一篇文章用rem编写移动端自适应网页(https://www.jianshu.com/p/91ac1690be89),这里说一下在vue-cli3中是如何配置的 安装 amfe-flexible 插件 npm i amfe-flexible --save-dev 在 main.js 中导入![]() ![]() ![]() ![]() ![]() ![]() ![]() promise 是个好东西,可以把异步变同步,在项目中使用 async await 编写代码,那叫一个爽,具体用法如下:
有赞是搞电商开发的,在公众号和小程序模板界算是做得比较不错的,vant-ui是他们开源出来的一个ui库,同时他们还有小程序的ui库,感兴趣的小伙伴可以去看看(https://youzan.github.io/vant/) |
CopyRight 2018-2019 实验室设备网 版权所有 |