同步操作将从 清流前端/vue-h5-template 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
前言
花了半天的时间整理了一个 vue 移动端项目的模板,希望多还不熟悉 vue 项目搭建的小伙伴有些帮助,也欢迎各路大神提出宝贵的建议,本文章默认你已经对 webpack 和 vue 有一定的了解。
核心知识体系简介
vue-cli3 脚手架
vue-router 路由
vuex 跨组件通信
rem 移动端适配
axios 配置
promise 使用
有赞 vant-ui 库
使用keep-alive组件缓存某些组件(新增)
添加小型服务器接口,用来编写本项目所需接口
vue-cli3 脚手架
// .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"
vue-router 路由
这里主要讲一下路由守卫的配置,先上图 下面是路由守卫配置
vuex 跨组件通信
项目中有以下几个地方用到了 vuex
以登录为里,做个简单说明 登录成功时,修改登陆状态为 true 退出登录时,修改登录状态为 false
获取 store 中 state 设置的变量通过 mapGetters, 看图
vuex 持久化
rem 移动端适配
适配原理我就不多说了,不清楚请看我的另外一篇文章用rem编写移动端自适应网页(https://www.jianshu.com/p/91ac1690be89),这里说一下在vue-cli3中是如何配置的
npm i amfe-flexible --save-dev
axios 配置
Promise 的使用
promise 是个好东西,可以把异步变同步,在项目中使用 async await 编写代码,那叫一个爽,具体用法如下:
有赞 vant-ui 库
有赞是搞电商开发的,在公众号和小程序模板界算是做得比较不错的,vant-ui是他们开源出来的一个ui库,同时他们还有小程序的ui库,感兴趣的小伙伴可以去看看(https://youzan.github.io/vant/)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。