/vue3-h5-template

🌱 基于vue3、vant3、vue-cli4、vw视口适配,开箱即用的H5移动端项目基础模板

Primary LanguageJavaScriptMIT LicenseMIT

🌱基于 Vue3 全家桶、Vant3,vw 视口适配,开箱即用的移动端项目基础模板

  • Vue3✨
  • Vant3✨
  • 支持 SVG 图标自动注册组件✨
  • vw 视口适配
  • Axios 封装
  • 生产环境 CDN 依赖
  • 打包资源 gzip 压缩
  • ESLint
  • 首屏加载动画
  • 项目资源路径 alias 别名
  • 开发环境调试面板
  • Vuex 集成
  • Vue-router 集成
  • 开发环境 Mock 数据

在线预览Preview

👓 点击这里(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

文档引导

- 按需引入 vant 组件

全量引入组件库太过臃肿,这里进行了按需引入,需要增加组件的话在registerVant.js中添加即可。

// src/plugins/registerVant.js

// 下面示例增加 Tabbar、TabbarItem 这两个组件
import {
  // ...
  Tabbar,
  TabbarItem
} from 'vant'

const componentList = [
  // ...
  Tabbar,
  TabbarItem
]

// ...

- SVG 图标使用

这里用了花裤衩大佬的 svg 解决方案,有兴趣详细了解可以点击文章

  1. 将 svg 图标文件放在src/icons/svg目录下
  2. 在项目中直接使用<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命名完全相同。

- 调试面板 eruda

为了方便移动端查看 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

本项目 Mock 是在本地开启 server,如果开发环境不需要 mock 数据,请在 vue.config.js 中注释 before 字段 ,并重启项目。

// vue.config.js
module.exports = {
  // ...
  devServer: {
    // 删除或注释 before 键值即可
    before: require('./mock/mock-server.js')
  }
}

- vw视口适配

使用 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生产环境依赖

本模板生产环境默认 CDN 加载依赖,依赖加载源见根目录 dependencies-cdn.js 文件。

❗ PS.为避免打包后出现不可预估问题,请注意确保生产和开发环境的依赖版本一致!

如需关闭 CDN 依赖,在根目录生产环境变量文件 .env.production 中修改 VUE_APP_CDN_DEPS 的值为 false ,重新打包即可。

鸣谢

vue-element-admin

vant-demo

License

MIT license.