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

cover.png

这款模板是基于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 pnpm
pnpm install

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

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

pnpm dev

点击查看 更详细使用指南

最后

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