# xfp-h5

**Repository Path**: xfp_hush/xfp-h5

## Basic Information

- **Project Name**: xfp-h5
- **Description**: 技术栈Vue3 + Vant4 + TS
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-04-16
- **Last Updated**: 2025-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
<br>
<h1 style="font-weight: bold;">xfp-h5</h1>
<h4>一个基于 Vue3 + Vant4 + TS 生态系统的 web移动端 应用模板，帮助你快速完成业务开发。</h4>

[文档](https://easy-temps.github.io/easy-docs/vue3-vant-mobile) / [在线演示](https://vue3-vant-mobile.netlify.app)
</div>


## 前端运行
```bash
# 克隆项目
git clone https://gitee.com/xfp_hush/xfp-h5.git

# 进入项目目录
cd xfp-h5

# 安装依赖 如果你没装过pnpm，可以先运行：npm install -g pnpm
pnpm i

# 启动服务 http://localhost:3000
pnpm dev

# 构建测试环境 pnpm build:dev
# 构建生产环境 pnpm build
```
使用此模板时，请尝试按照以下清单正确更新您自己的信息
- [ ] 在 `LICENSE` 中改变作者名
- [ ] 在 `index.html` 中改变标题
- [ ] 在 `vite.config.ts` 更改主机名
- [ ] 在 `public` 目录下改变favicon
- [ ] 整理 README 并删除路由


## 平台简介
* 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
* 配套后端代码仓库地址[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 或 [RuoYi-Vue-fast](https://github.com/yangzongzhuan/RuoYi-Vue-fast) 版本。

- ⚡️ [Vue 3](https://github.com/vuejs/core)，[Vite 5](https://github.com/vitejs/vite)，[pnpm](https://pnpm.io/)，[esbuild](https://github.com/evanw/esbuild) - 就是快！
- 🗂 [基于文件的路由](./src/router)
- 📦 [组件自动化加载](./src/components)
- 🍍 [使用 Pinia 的状态管理](https://pinia.vuejs.org)
- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
- 🎨 [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎
- 🌍 [I18n 国际化开箱即用](./src/locales)
- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入
- 💪 TypeScript，当然
- ⚙️ 使用 [Vitest](https://github.com/vitest-dev/vitest) 进行单元测试
- 💾 [本地数据模拟](https://github.com/pengzhanbo/vite-plugin-mock-dev-server)的支持
- 🪶 [Vant](https://github.com/youzan/vant) - 移动端 Vue 组件库
- 🔭 [vConsole](https://github.com/vadxq/vite-plugin-vconsole) - 移动端网页开发工具
- 📱 浏览器适配 - 使用 viewport vw/vh 单位布局
- 💻 [桌面端优化](https://github.com/wswmsword/postcss-mobile-forever) - 处理为移动端视图
- 🌓 支持深色模式
- 🛡️ 将 [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 设为默认
- ☁️ 零配置部署 [Netlify](https://www.netlify.com)