🌈 uni-preset-vue 模板说明文档

一个基于 Vue3 + TypeScript + Vite + Pinia + TailwindCSS 的 uni-app 模板，内置多端开发环境配置，支持一键运行微信小程序、H5、App 及各类小程序平台。 本模板旨在快速搭建跨端项目，统一前端开发规范，提高开发效率。

📦 技术栈

| 技术 | 说明 | | ---------------------------------- | ---------------------- | | Vue 3 | 渐进式前端框架 | | TypeScript | 静态类型检查 | | Vite | 高性能构建工具 | | Pinia | 轻量级状态管理 | | TailwindCSS | 原子化 CSS 框架 | | VueUse | Vue3 实用工具库 | | Iconify | 图标库整合方案 | | Day.js | 日期处理库 | | Crypto-js / js-md5 / js-base64 | 数据加密与编码工具 | | ESLint + Prettier | 统一代码风格与语法检查 |

🚀 快速开始

1️⃣ 安装依赖

pnpm install
# 或
npm install
# 或
yarn

2️⃣ 启动开发

可根据需要启动不同端的调试模式：

| 命令 | 平台说明 | | ------------------------------ | ------------------- | | npm run dev:h5 | 运行 H5 页面 | | npm run dev:mp-weixin | 运行微信小程序 | | npm run dev:mp-alipay | 运行支付宝小程序 | | npm run dev:mp-toutiao | 运行字节跳动小程序 | | npm run dev:mp-baidu | 运行百度小程序 | | npm run dev:mp-qq | 运行 QQ 小程序 | | npm run dev:mp-xhs | 运行小红书小程序 | | npm run dev:quickapp-webview | 运行快应用 | | npm run dev:h5:ssr | 运行 SSR 模式（H5） |

3️⃣ 打包构建

| 命令 | 说明 | | -------------------------------- | ---------------- | | npm run build:h5 | 构建 H5 版本 | | npm run build:mp-weixin | 构建微信小程序 | | npm run build:mp-alipay | 构建支付宝小程序 | | npm run build:mp-toutiao | 构建字节小程序 | | npm run build:h5:ssr | 构建 SSR H5 | | npm run build:quickapp-webview | 构建快应用 |

🧩 项目结构

uni-preset-vue/
├── src/
│   ├── pages/           # 页面目录
│   ├── components/      # 公共组件
│   ├── store/           # Pinia 状态管理
│   ├── utils/           # 工具函数与封装
│   ├── locales/         # i18n 国际化配置
│   ├── styles/          # 全局样式与 Tailwind 配置
│   └── main.ts          # 入口文件
│
├── uni_modules/         # uni-app 模块目录
├── static/              # 静态资源
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md

🧠 开发规范

代码规范

• 使用 TypeScript 编写逻辑。

• 使用 ESLint + Prettier + Tailwind 进行自动格式化。

• 提交前执行：

  npm run type-check

  确保类型检查通过。

目录规范

• 页面统一放在 src/pages/
• 公共组件放在 src/components/
• 全局状态放在 src/store/
• 工具函数放在 src/utils/
• 样式配置统一放在 src/styles/

🧰 常用依赖说明

| 依赖 | 用途 | | ------------------------------------ | -------------- | | @vueuse/core | 常用组合式函数 | | dayjs | 时间格式化 | | crypto-js / js-md5 / js-base64 | 数据加密与签名 | | qs | 请求参数序列化 | | @iconify/vue | 图标组件 | | pinia | 全局状态管理 | | vue-i18n | 多语言支持 |

🧪 检查与优化

| 命令 | 功能 | | -------------------- | --------------------------- | | npm run type-check | 类型检查 | | npm run lint | 语法检查 | | npm run format | 自动格式化（结合 Prettier） |

🌍 支持平台

| 平台 | 是否支持 | | --------------------- | -------- | | H5 | ✅ | | 微信小程序 | ✅ | | 支付宝小程序 | ✅ | | 抖音小程序 | ✅ | | 百度小程序 | ✅ | | QQ 小程序 | ✅ | | 快应用 | ✅ | | HarmonyOS (鸿蒙 NEXT) | ✅ |

💡 开发建议

1. 推荐使用 VSCode 搭配以下插件：

   • 🌟 Volar（Vue 3 支持）
   • 🌟 ESLint
   • 🌟 Tailwind CSS IntelliSense
   • 🌟 Iconify IntelliSense

2. 若需自定义端平台启动，请修改 package.json 中的 scripts 命令。

3. 统一风格建议使用 prettier-plugin-tailwindcss 自动调整类名顺序。

🧾 License

本项目模板仅供学习与快速开发使用。 如需商用或二次封装，请保留原作者说明或在适当位置注明出处。

👨‍💻 作者信息

• 作者：josef
• 模板名称：uni-preset-vue
• 创建时间：2025 年
• 版本：v1.0.0

📅 更新日志

| 日期 | 版本 | 内容 | | ---------- | ------ | -------------- | | 2025-10-13 | v1.0.0 | 初始化项目模板 |