BestUni

BestUni - 基于 Vue 3 + TypeScript + Vite 的 UniApp 快速启动模板。

✨ 特性

• 🚀 Vue 3 + TypeScript - 使用最新的 Vue 3 组合式 API
• 📦 Vite 5 - 极速冷启动与热更新
• 🗃 Pinia - 状态管理 + 持久化存储
• 🔐 请求封装 - Token 自动注入、错误统一处理
• 📱 多端支持 - H5、微信小程序、支付宝小程序、App
• 🎨 主题定制 - 支持亮色/暗黑模式切换

📦 安装

# 克隆模板
npx degit sumintong/bestuni my-app

# 或直接下载
npm init bestuni my-app

📂 目录结构

src/
├── composables/       # 组合式函数
├── layouts/           # 布局组件
├── pages/             # 页面目录
│   ├── index/         # 首页
│   └── mine/          # 我的
├── stores/            # Pinia 状态管理
│   ├── app.ts         # 应用状态
│   ├── user.ts        # 用户状态
│   └── index.ts
├── styles/            # 全局样式
│   ├── variables.scss # SCSS 变量
│   └── index.scss     # 样式入口
├── utils/             # 工具函数
│   ├── request.ts     # 请求封装
│   ├── router.ts      # 路由工具
│   └── index.ts
├── static/            # 静态资源
├── App.vue            # 根组件
├── main.ts            # 入口文件
├── manifest.json      # 应用配置
├── pages.json         # 页面配置
└── uni.scss           # 全局样式变量

🚀 快速开始

安装依赖

pnpm install

运行项目

# H5
pnpm dev

# 微信小程序
pnpm dev:mp-weixin

# App
pnpm dev:app

打包发布

# H5
pnpm build:h5

# 微信小程序
pnpm build:mp-weixin

# App
pnpm build:app

🗃 状态管理

使用 Pinia 进行状态管理，已配置持久化存储：

import { useUserStore } from '@/stores'

const userStore = useUserStore()

// 登录
await userStore.login({ token: 'xxx', userInfo: { ... } })

// 登出
userStore.logout()

🔐 请求封装

import { request, get, post } from '@/utils'

// 基础请求
const res = await request({ url: '/api/user', method: 'GET' })

// 快捷方法
const data = await get('/api/user')
const result = await post('/api/login', { username: 'admin' })

🔗 相关链接

• UniApp 官网
• Vue 3 文档
• Pinia 文档
• Vite 文档

📄 License

MIT License © 2026 sumintong