# vue3-vite6-h5-template

**Repository Path**: donymh/vue3-vite6-h5-template

## Basic Information

- **Project Name**: vue3-vite6-h5-template
- **Description**: 无冗余代码，由vue3.5+vue-router4+pinia3+vite6+vant4+eslint+stylelint+commitizen实现的简单实用的移动端H5模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-05-12
- **Last Updated**: 2025-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: template, H5, Vue, TypeScript, Vant

## README

# vue3-vite6-h5-template

#### 介绍
无冗余代码，由vue3.5+vue-router4+pinia3+vite6+vant4+eslint+stylelint+commitizen实现的简单实用的移动端H5模板。可在[线上预览模板](https://dony.online/usage/template.html)中查看。

# 前端资源汇总

[https://dony.online/usage/](https://dony.online/usage/)
<br></br>

# 项目预览地址
https://dony.online/usage/template.html
<br></br>

# 项目目录结构

```
.
├── scripts              # 构建相关文件
│   ├── plugins          # vite 插件配置文件夹
│   ├── create-build.ts
│   ├── create-css.ts
│   └── create-server.ts
├── dist                # 打包输出目录
├── public              # 公共静态文件
├── src                 # 源码
│   ├── api             # 接口请求
│   ├── assets          # webpack打包的资源
│   │   ├── icons       # icon sprite 图标文件夹
│   │   ├── images      # 项目存放图片的文件夹
│   │   ├── styles      # 项目存放样式的文件夹
│   │   └── svg         # 项目存放svg图片的文件夹
│   ├── components      # 公共组件
│   ├── config          # 业务所需配置文件, 是否需要接入APM、满意度等配置
│   ├── directives      # 全局指令
│   ├── hooks
│   ├── layouts         # 全局Layout
│   ├── router          # 路由
│   ├── store           # 全局store管理仓库
│   ├── types           # ts 声明
│   ├── utils           # 全局公共方法
│   ├── views           # 所有业务页面
│   ├── enums           # 全局ts字典
│   ├── constants       # 全局常量
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── tests
├── .browserslistrc
├── .env.prod
├── .env.dev
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .stylelintignore
├── .stylelintrc
├── app.config.js        # 系统布局、主题、字体等配置文件，和业务无关
├── dev.config.js        # 开发配置文件
├── index.html           # html模板文件
├── jest.config.js       # 单测配置
├── package-lock.json
├── package.json
├── README.md
├── sonar-project.properties  # 代码扫描配置
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.js        # vue vite配置文件
```

<br><br>

# 启动流程
## Project setup
node >= 18

```
pnpm install
```

## Compiles and hot-reloads for development

```
pnpm run serve
```

## Compiles and minifies for production

```
pnpm run build
```

# 设计稿
本模板使用的是postcss-pxtorem实现的px转换rem布局，设置的基数为37.5px，即1rem=37.5px，1px=0.0625rem。该值请根据自己设计稿基数在 scripts/create-css.ts 文件中修改。

# 版本兼容
1. ios >= 13
2. android >= 9.0