推荐一款基于 Vue3 的移动 H5 模板，加速你的移动应用开发

这款模板是基于 Vue3 技术栈的，这么说是因为不少人在使用 React 技术栈。如果正好你使用 Vue3 技术构建移动应用，那么这篇文章会对你有所帮助。

引言

我们常常听到的是企业级中后台前端模板，但很少听说移动端模板，也不难理解，这是因为中后台的样子，需求大都一致，比如左侧的菜单、顶部的导航、以及主要用 table 展示数据的内容区域，权限路由配置等，由于这些共性，这些模板项目非常多，如果开发者在模板基础上构建应用，可以节省很多时间。而关于移动端模板，我们听到的并不多，这大概是因为每个移动应用都不一样，而且构建移动应用的技术选择也是五花八门，怎么选择也是一个非常头痛的事情。

事实上，构建一个移动模板，需要考虑的事情也很多，大家不妨回想一下自己过去构建一个项目所要准备的工作。远不是各大前端框架脚手架就可以进行后续的开发工作了，他们所提供的是一个简单的开始。那一个快速进行业务开发的移动模板，应该考虑什么呢，我认为至少还要考虑大家在实际业务中那些共性的地方，比如移动端设备众多，需要考虑屏幕适配吧。此外，一个移动模板，还要考虑 DX 的问题，也就是开发者体验问题，比如组件是不是能自动引入、支持类型校验、ajax 通信、mock 支持、移动真机调试等等。有了这些配置，开发者才能写的更开心，完成的更快。所以，基于上面这些问题，我开源了这个项目 vue3-vant-mobile。

点击查看 预览地址

项目概述

就像引言里面所说的那样，移动端模板不像中后台前端模板，UI 都很像，那移动端模板其实更多地是一个技术上的开箱即用的解决方案，把那些最佳实践给统筹到一块。当然，项目也选择了一个使用率、欢迎率上更好的的 UI 库，Vant。可以看出来，这个项目的名字也体现了这点 Vue + Vant = mobile，构建移动应用。

这个项目集成了构建一个前端应用所用到的现代主流技术，具体来说，使用到了 Vue 3、Typescript、Pinia、Vite 等前端前沿技术，并且提供了一些基本演示，比如暗黑模式、Mock 指南，还有 Charts 组件，开发者在实际使用时，可以删掉这些代码，它们存在的目的是一个引导作用。需要补充的是，项目没有提供一些复杂的界面，比如一个仿某站的应用，亦或是提供登录、底部 Footer。因为每个实际业务可能不一样。相信大家借助 Vant，也能快速完成自己的业务。

本项目目标受众主要是那些想要快速完成移动应用的开发者，可以应用在微信公众号网页开发、移动 Wap 站等等。开发者借助这个模板，可以继续向上构建自己的业务场景，快速完成工作。本模板除了节省开发者时间以外，还能给开发者提供一个很好的引导，希望真的对你有帮助。

目录结构

下面是模板的主要目录结构和一些简要地说明：

├── .husky│   └── commit-msg           # commit 信息校验|   └── pre-commit           # eslint 代码检验├── src│   ├── api                  # Api ajax 等│   ├── assets               # 本地静态资源│   ├── layouts              # 封装布局组件│   ├── components           # 业务通用组件和基础布局组件│   ├── router               # Vue-Router│   ├── store                # Pinia│   ├── utils                # 工具库│   ├── views                # 业务页面入口和常用模板│   ├── App.vue              # Vue 模板入口│   └── main.ts              # Vue 入口 JS│   └── app.less             # 全局样式│   └── env.d.ts             # 全局公用 TypeScript 类型├── build/mock               # mock 服务├── mock                     # mock 数据├── plop-templates           # 代码块生成├── public                   # 静态文件├── scripts                  # 公共执行脚本├── tests                    # 单元测试├── plopfile.js              # plop 入口├── auto-imports.d.ts        # Vue3 组合式API 类型声明文件├── components.d.ts          # 组件自注册类型声明文件├── vite.config.ts           # Vite 配置文件├── tsconfig.json            # TS 配置文件├── index.html               # 浏览器渲染入口├── Guide.md                 # 使用指南├── README.md                # 简单介绍└── package.json             # 项目的依赖

主要功能特性

下面针对模板的主要特性做一些简要说明。

🚀 Vue3 开箱即用

模板使用 Vue3 生态链里的主要技术，Vue-Router、Pinia、Vite、Vitest，安装到本地以后，无需做任何修改和配置，即可使用。

🌓 支持暗黑模式

Vant UI 组件库本身支持深色模式，所以本模板只是做了很少的工作，提供些许 CSS 变量和一些全局控制，大家可以参考这篇指南扩展自己的深色模式。

💪 使用 TS 类型校验

这里的类型校验是全局的，无论是配置文件，还是页面当中使用到的状态，都严格遵循 TS 类型规范。尽量不用 any。

🤖 自动引入组件、API

模板使用了 Unjs 的 unplugin-vue-components 插件，这款插件可以自动引入组件，无需注册再使用。另外，对于 Vue3 的组合式 API，大家也无需引入再使用，同样由 Unjs 的 unplugin-auto-import 提供支持。

📄 plop 创建代码片段

除了手动创建 vue 文件以外，本模板也支持命令式创建，已经预置了两种 view 和 component。开发者可以运行如下命令快速创建：

pnpm plop

这个功能由 plop 提供支持。

📦 使用 pnpm 包管理器

模板使用 pnpm 来进行包管理，可以极大地减少 install 时间, 而且非常节省磁盘空间。

💾 支持 mock 服务

这是模板最重要的功能特性，大家可以通过在 vite.config.ts 开启 mock, 实现本地数据测试。详情请看使用指南。

🌈 支持 git 钩子

git 钩子预置了两种钩子，代码的 lint 检查，采用 antfu 的 eslint 配置。另外提供了提交信息的检查。

💖 集成 Vant UI 库

Vant 提供了五十种移动端常用组件，开发者基于此可以快速构建界面，建议采用按需引入。

🍍 使用 Pinia 状态管理

模板丢弃 Vuex 状态管理，采用 Pinia 新一代状态管理方案。

🖥 响应式，PC 友好

模板采用主流的 viewport 响应式方案。

使用指南

克隆原仓库的代码到本地。

git clone https://github.com/CharleeWa/vue3-vant-mobile.git

进入代码目录，安装项目的依赖。

cd vue3-vant-mobile
# with pnpmpnpm install

如果网络状况不佳，可以设置 pnpm 的 npm 加载源，如 pnpm config set registry https://registry.npmmirror.com

完成前面的步骤以后，就可以启动项目，开始进行业务开发了。

pnpm dev

点击查看 更详细使用指南

最后

这个项目从去年开始开源，期间收到了很多帮助和鼓励，谢谢美丽的你们。如果你在使用模板的过程中有任何疑问，欢迎提交议题；如果项目对你有启发，也请求给这个项目一个star，谢谢！