【源码】基于 Vue3 和 Vite 的 H5 端开发模板

项目简介

本项目是基于 Vue3 和 Vite 的 H5 端开发模板，运用前沿前端技术栈，集成多种实用工具与组件库，为开发者提供高效便捷的 H5 开发方案。具备完善项目结构与规范，支持移动端适配，可助力开发者快速搭建和开发 H5 应用。

项目的主要特性和功能

1. 采用 Vue3、Vite、TypeScript 等先进技术，提高开发效率与代码质量。
2. 集成 PiniaV2 实现轻量级状态管理，便于处理公共数据。
3. 引入 Vant V3 移动端组件库，满足各类业务需求。
4. 结合 windicss 框架和 less 处理样式，简化编写与管理，支持 css module。
5. 通过 postcss-px-to-viewport 实现 vw 适配，设计稿统一为 375px。
6. 集成 eslint、stylelint、prettier、commitlint、editorConfig 确保代码规范。
7. 使用 Vue-RouterV4 进行路由配置与管理。
8. 封装多种实用工具函数，涵盖 http 请求、auth token 操作、时间处理等。

安装使用步骤

前提条件

假设用户已下载本项目源码文件，且已安装 Node.js 和 yarn 或 tyarn。

安装依赖

在项目根目录下，打开终端并执行： bash tyarn

运行开发模式

执行以下命令启动开发服务器，支持修改热加载： bash npm run dev

打包

• 测试环境打包： bash npm run build:uat
• 生产模式打包： bash npm run build:prod

打包分析

执行以下命令进行打包分析： bash npm run analyze

代码提交

项目集成了 git hooks，请使用 commitizen 工具提交代码： bash git add. npm run commit

分支管理

• develop 为开发分支，master 为测试分支，pro_date 为预发布分支，prod_date 为正式环境分支。
• 功能分支从 develop 检出，命名为 feature_姓名_分支创建时间。
• 测试环境修复分支从 master 新建，命名为 bugfix_姓名_分支创建时间。
• 生产环境问题修复从 prod_date 新建 hotfix 分支，修复完成后按流程合并。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】