Vite Vue3 H5 Template

Appearance

项目简介 ​

关于项目 ​

Vite Vue3 H5 Template 是一个基于 Turborepo 的 Monorepo 项目模板，专为移动端 H5 开发而设计。它结合了现代前端技术栈的最佳实践，提供了一套完整的开发解决方案，帮助开发者快速构建高质量的移动端 Web 应用。

核心特性 ​

🚀 高性能构建工具 ​

  • 基于 Vite 构建，提供极速的开发体验
  • 支持热模块替换（HMR），代码修改即时生效
  • 优化的生产构建，自动压缩资源文件

📦 Monorepo 架构 ​

  • 使用 Turborepo 管理多个包
  • 统一的依赖管理和构建流程
  • 支持本地包链接和版本管理

🛠 现代化技术栈 ​

📱 移动端优化 ​

  • 响应式设计，适配各种移动设备
  • 预设移动端 UI 组件库
  • 支持手势操作和动画效果
  • 移动端调试工具集成

🎨 开发体验优化 ​

  • 完整的 ESLint 和 Prettier 配置
  • Git Hooks 保证代码质量
  • 规范化的提交信息
  • 自动生成组件文档

🔧 实用功能集成 ​

  • 网络请求封装
  • 路由管理
  • 状态持久化
  • 国际化支持
  • 主题切换
  • Mock 数据支持

适用场景 ​

本模板适用于以下类型的项目：

  1. 企业级移动端 H5 应用 - 需要高性能和良好用户体验的业务系统
  2. 营销活动页面 - 需要快速开发和部署的推广页面
  3. 移动 Web App - 需要接近原生应用体验的 Web 应用
  4. 混合应用 - 可与 Cordova、Ionic 等混合开发框架结合使用

项目组成 ​

bash
├── apps/                    # 应用目录
│   ├── h5-template/         # H5 模板应用
│   └── docs/                # 项目文档
├── packages/                # 共享包
│   └── typescript-config/   # TypeScript 配置
├── package.json             # 根项目配置
├── pnpm-workspace.yaml      # pnpm 工作区配置
└── turbo.json               # Turborepo 配置

技术亮点 ​

1. 智能的按需引入 ​

  • 使用 unplugin-auto-import 自动引入 Vue、Vue Router 等常用 API
  • 使用 unplugin-vue-components 自动引入组件
  • 减少手动 import，提升开发效率

2. 完善的类型支持 ​

  • 完整的 TypeScript 类型定义
  • Vue 模板中的类型检查
  • API 接口的类型安全

3. 灵活的样式方案 ​

  • UnoCSS 原子化 CSS，按需生成样式
  • 支持 SCSS 预处理器
  • 提供常用的 Mixins 和 Variables

4. 强大的状态管理 ​

  • 基于 Pinia 的状态管理
  • 支持状态持久化
  • 模块化的 store 设计

5. 完善的开发工具链 ​

  • ESLint + Prettier 保证代码质量
  • Husky + Lint-staged Git 钩子
  • Commitizen + Commitlint 规范提交信息
  • VitePress 文档系统

快速开始 ​

请查看 快速开始 指南了解如何安装和运行项目。

贡献指南 ​

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。在贡献代码之前，请确保：

  1. 阅读并理解项目结构和编码规范
  2. 遵循 Git 提交规范
  3. 确保代码通过所有测试和 lint 检查
  4. 更新相关文档

许可证 ​

本项目采用 MIT 许可证，详见 LICENSE 文件。