推荐一款基于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站等等。开发者借助这个模板，可以继续向上构建自己的业务场景，快速完成工作。本模板除了节省开发者时间以外，还能给开发者提供一个很好的引导，希望真的对你有帮助。

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

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

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

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

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

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

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

这个功能由 plop 提供支持。

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

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

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

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

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

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

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

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

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

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

点击查看 更详细使用指南

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