🌱基于 Vue3 全家桶、Vant3，vw 视口适配，开箱即用的移动端项目基础模板
- Vue3✨
- Vant3✨
- 支持 SVG 图标自动注册组件✨
- vw 视口适配
- Axios 封装
- 生产环境 CDN 依赖
- 打包资源 gzip 压缩
- ESLint
- 首屏加载动画
- 项目资源路径 alias 别名
- 开发环境调试面板
- Vuex 集成
- Vue-router 集成
- 开发环境 Mock 数据
👓 点击这里（PC浏览器请切换手机端模式）
# 克隆项目
git clone https://github.com/yulimchen/vue3-h5-template.git
# 进入项目目录
cd vue3-h5-template
# 安装依赖
yarn
# OR
npm install
# 启动服务
yarn serve
# OR
npm run serve全量引入组件库太过臃肿，这里进行了按需引入，需要增加组件的话在registerVant.js中添加即可。
// src/plugins/registerVant.js
// 下面示例增加 Tabbar、TabbarItem 这两个组件
import {
// ...
Tabbar,
TabbarItem
} from 'vant'
const componentList = [
// ...
Tabbar,
TabbarItem
]
// ...这里用了花裤衩大佬的 svg 解决方案，有兴趣详细了解可以点击文章。
- 将 svg 图标文件放在
src/icons/svg目录下- 在项目中直接使用
<svg-icon icon-class="svg图标文件命名" />即可
例如：
本项目src/icons/svg中放了个叫check-in.svg的图标文件，然后在组件icon-class属性中填入文件的命名即可，So easy~
<svg-icon icon-class="check-in" />组件默认开启缓存，如某个组件需关闭缓存，在对应路由 routes meta 内的noCache字段赋值为true即可。
{
path: '/about',
name: 'About',
component: () => import('@/views/about'),
meta: {
noCache: true
}
},PS. 为了保证页面能被正确缓存，请确保组件的
name值和对应路由的name命名完全相同。
为了方便移动端查看 log 信息和调试，开发环境引入了 eruda 调试面板的 cdn。如果你的开发环境不需要的话请在 .env.development 中修改值，并重启本地服务
# .env.development
# 开发环境启用 eruda 调试台。若不启用，将 true 修改为 false 或其他任意值即可
VUE_APP_ENABLE_ERUDA = true在路由全局前置守卫中：
// src/router/index.js
// ...
router.beforeEach((to, from, next) => {
// ...
// 设置页面 title
setPageTitle(to.meta.title)
next()
})具体实现方法见文件 src/utils/set-page-title.js 。
本项目 Mock 是在本地开启 server，如果开发环境不需要 mock 数据，请在
vue.config.js中注释before字段 ，并重启项目。
// vue.config.js
module.exports = {
// ...
devServer: {
// 删除或注释 before 键值即可
before: require('./mock/mock-server.js')
}
}使用 postcss-px-to-viewport 进行视口适配，相关配置见项目根目录下 vue.config.js，如修改内容，需修改后重启项目。
// vue.config.js
module.exports = {
// ...
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
viewportWidth: 375, // 根据设计稿设定
minPixelValue: 1, // 最小的转换数值
unitPrecision: 2 // 转化精度，转换后保留位数
})
]
}
}
},
}本模板生产环境默认 CDN 加载依赖，依赖加载源见根目录 dependencies-cdn.js 文件。
❗ PS.为避免打包后出现不可预估问题，请注意确保生产和开发环境的依赖版本一致！
如需关闭 CDN 依赖，在根目录生产环境变量文件
.env.production中修改VUE_APP_CDN_DEPS的值为false，重新打包即可。