mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2026-05-21 10:18:13 +08:00
21d2f9b3b2
Bumps [axios](https://github.com/axios/axios) from 1.13.2 to 1.16.0. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.13.2...v1.16.0) --- updated-dependencies: - dependency-name: axios dependency-version: 1.16.0 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com>
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 |
打包分析 |
其他版本
文档
详细的使用文档请查看 在线文档
如果对你有帮助，欢迎 Star 支持 ⭐
关于我
扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。
如果你觉得该项目有给你带来帮助，可以请作者喝一杯 ☕ 支持持续的迭代
| WechatPay | AliPay |
 |
 |