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

• Vue3✨
• Vant3✨
• 支持 SVG 图标自动注册组件✨
• vw/vh 视口适配
• 首屏加载动画
• 项目资源路径 alias 别名
• 开发环境调试面板
• Vuex 集成
• Vue-router 集成
• Axios 封装 (TODO)

在线预览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" />

调试面板 eruda

为了方便移动端查看 log 信息和调试，开发环境引入了 eruda 调试面板的 cdn。如果你的开发环境不需要的话请在 index.html中删除以下代码：

<!-- public/index.html -->

<% if (NODE_ENV === 'development') { %>
    <!-- console -->
    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
    <script>
      eruda.init();
    </script>
<% } %>

鸣谢

vue-element-admin

vant-demo