Uni-App 快速启动模版 (Vue3)

一个轻量、现代的 uni-app 开发模板，基于 Vue 3 + TypeScript + Vite 构建。

---

特性

• ⚡️ Vue 3 + Vite + TypeScript - 现代化技术栈，极速开发体验
• 🎨 UnoCSS - 高性能原子化 CSS 引擎，支持 rpx 自动转换
• 🐂 WotUI - 70+ 高质量 uni-app 组件，支持暗黑模式与主题定制
• 🌐 Alova - 极致高效的请求库，内置 token 自动刷新
• 📊 ECharts - 集成 uni-echarts，支持数据可视化
• 🗂️ 文件路由 - 基于文件的路由系统，自动生成路由配置
• 📦 智能分包 - 支持跨包异步调用，优化包体积
• 📥 API 自动生成 - 基于 OpenAPI 规范自动生成接口代码
• 🔧 ESLint + Stylelint - 代码规范自动校验
• 🤖 AI 辅助 - 内置 Claude/MCP 配置，支持 AI 辅助开发

技术栈

快速开始

环境要求

• Node.js >= 22
• pnpm >= 10

安装

# 克隆项目
git clone https://github.com/yikoyu/uniapp-vue3-template.git
cd uniapp-vue3-template

# 安装依赖
pnpm install

开发

# 启动 H5
pnpm h5:dev

# 启动微信小程序
pnpm wx:dev

# 启动支付宝小程序
pnpm ali:dev:tst

构建

# 构建 H5
pnpm h5:build:dev    # 开发环境
pnpm h5:build:tst    # 测试环境
pnpm h5:build:prd    # 生产环境

# 构建微信小程序
pnpm wx:build:dev
pnpm wx:build:tst
pnpm wx:build:prd

目录结构

├── src/
│   ├── api/                    # API 层
│   │   ├── _gen/              # OpenAPI 自动生成的接口
│   │   ├── core/              # 请求核心配置
│   │   └── mock/              # Mock 数据
│   ├── components/            # 公共组件（自动导入）
│   ├── hooks/                 # 组合式函数
│   ├── layouts/               # 页面布局
│   ├── packages/              # 分包
│   │   ├── sub-static/        # 静态资源分包
│   │   ├── sub-vendor/        # 第三方库分包
│   │   └── sub-comp/          # 业务组件分包
│   ├── pages/                 # 页面目录
│   ├── plugins/               # 插件（路由、调试）
│   ├── stores/                # Pinia 状态管理
│   ├── styles/                # 全局样式
│   └── utils/                 # 工具函数
├── types/                     # TypeScript 类型定义
├── scripts/                   # 构建脚本
├── vite.config.ts             # Vite 配置
├── uno.config.ts              # UnoCSS 配置
├── manifest.config.ts         # uni-app 配置
└── pages.config.mts           # 页面路由配置

核心功能

请求封装

基于 alova 的请求层，内置 token 自动刷新和统一错误处理：

// src/api/core/instance.ts
export const alovaInstance = createAlova({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  // ... 配置
})

使用示例：

// 自动生成的 API
const res = await Apis.user.getUserInfo()

// 或直接使用 alovaInstance
const res = await alovaInstance.Get('/api/data')

状态管理

使用 Pinia + 持久化插件，支持选择性持久化：

// src/stores/app.ts
export const useAppStore = defineStore('app', {
  persist: {
    key: 'pinia-app',
    pick: ['accessToken', 'refreshToken'], // 只持久化必要字段
  },
  // ...
})

文件路由

基于文件自动生成路由配置，支持布局：

<script lang="ts" setup>
definePage({
  layout: 'tabbar', // 使用 tabbar 布局
  style: {
    navigationBarTitleText: '首页',
  },
})
</script>

API 自动生成

基于 OpenAPI 规范自动生成类型安全的接口代码：

# 生成 API 代码
pnpm alova-gen

开发规范

代码提交

使用 cz-git 进行交互式提交：

pnpm commit

代码检查

pnpm lint          # 检查所有
pnpm lint:js       # 仅检查 JS/Vue
pnpm lint:css      # 仅检查样式
pnpm lint:fix      # 自动修复
pnpm lint:vue      # TypeScript 类型检查

更新 uni-app

使用 UVM (uni-app version manager) 更新：

pnpm uvm

同步更新

# 添加上游仓库
git remote add upstream https://github.com/yikoyu/uniapp-vue3-template

# 拉取更新
git fetch upstream

# 合并更新
git merge upstream/main

# 或使用 rebase 保持线性提交
git rebase upstream/main

支持平台

平台	状态
H5	✅ 已测试
微信小程序	✅ 已测试
支付宝小程序	✅ 已测试
抖音小程序	⚠️ 未测试
QQ 小程序	⚠️ 未测试
百度小程序	⚠️ 未测试
快手小程序	⚠️ 未测试
京东小程序	⚠️ 未测试
小红书小程序	⚠️ 未测试
鸿蒙	⚠️ 未测试
App (Android/iOS)	⚠️ 未测试

License

MIT