Vue H5 Template

基于 Vue 3 + Vite 7 + TypeScript + 多 UI 组件库 + Pinia + viewport 适配方案，构建移动端快速开发脚手架

在线文档 · 问题反馈

---

特性

• Vue 3.5 + Vite 7 + TypeScript 5.9 — 最新技术栈
• 多 UI 组件库 — 同时支持 Vant、NutUI、Varlet，按需自动引入
• Pinia 状态管理 — 配合 pinia-plugin-persistedstate 实现持久化
• viewport（vw）适配 — 基于 cnjm-postcss-px-to-viewport，自动处理 UI 库 375/750 设计稿差异
• Axios + useFetch 双请求方案 — 支持传统 Axios 和 @vueuse/core 的 createFetch
• vue-i18n 多语言 — 按需懒加载语言包
• 文件路由 — 基于 vite-plugin-pages 自动生成路由
• 丰富的 Vite 插件 — Mock、Eruda 调试、PWA、QRCode、图片压缩、gzip 压缩、打包分析等
• 代码规范 — ESLint flat config + Prettier + Stylelint + Husky + lint-staged
• Docker 部署 — 内置 Dockerfile + Nginx 配置

环境要求

工具	版本
Node.js	>= 20.10.0
pnpm	>= 9.12.0

快速开始

# 拉取项目
git clone https://github.com/sunniejs/vue-h5-template.git

# 进入项目目录
cd vue-h5-template

# 安装依赖
pnpm install

# 启动项目
pnpm dev

# 打包
pnpm build

# 预览打包结果
pnpm preview

项目结构

├── build/                  # Vite 构建相关配置
│   ├── vite/plugins/       # Vite 插件配置（auto-import、component、mock、eruda 等）
│   └── utils.ts            # 构建工具函数
├── mock/                   # Mock 数据
├── public/                 # 静态资源
├── src/
│   ├── api/                # 接口管理
│   ├── assets/             # 项目资源（字体、图片等）
│   ├── layout/             # 布局组件
│   ├── locales/            # 国际化语言包
│   ├── router/             # 路由配置
│   ├── store/              # Pinia 状态管理
│   ├── styles/             # 全局样式 & SCSS 变量
│   ├── utils/              # 工具函数（Axios 封装、useFetch 封装）
│   ├── views/              # 页面组件
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── types/                  # TypeScript 类型声明
├── .env.*                  # 多环境变量配置
├── vite.config.mts         # Vite 配置
├── postcss.config.js       # PostCSS 配置（viewport 适配）
├── Dockerfile              # Docker 部署配置
└── nginx.conf              # Nginx 配置

集成的 Vite 插件

插件	说明
unplugin-auto-import	按需自动引入 API
unplugin-vue-components	按需自动引入组件
vite-plugin-pages	文件系统路由
vite-plugin-mock	本地 Mock 数据
@zhaojjiang/vite-plugin-eruda	移动端调试工具
vite-plugin-svg-icons	SVG 图标
vite-plugin-compression	Gzip 压缩
vite-plugin-imagemin	图片压缩
vite-plugin-pwa	PWA 支持
vite-plugin-qrcode	开发时二维码
vite-plugin-restart	配置文件修改自动重启
vite-plugin-progress	构建进度条
@vitejs/plugin-basic-ssl	本地 HTTPS
rollup-plugin-visualizer	打包分析

其他版本

• vue-h5-template-lite（纯 JS 版）— 点击查看
• vue2-h5-template（Vue 2 版）— 点击查看
• monorepo 版（Monorepo 架构）— 点击查看

文档

详细的使用文档请查看 在线文档

如果对你有帮助，欢迎 Star 支持 ⭐

关于我

扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。

如果你觉得该项目有给你带来帮助，可以请作者喝一杯 ☕ 支持持续的迭代

WechatPay	AliPay

Star History

License

MIT