# uniapp+vite+vue3+pinia+ts 框架

**Repository Path**: catmasks/uniapp-framework

## Basic Information

- **Project Name**: uniapp+vite+vue3+pinia+ts 框架
- **Description**: uniapp+vite+vue3+pinia+ts 框架
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 23
- **Forks**: 2
- **Created**: 2023-08-23
- **Last Updated**: 2026-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, vue3, TypeScript, vite

## README

# uni-app Vue 3 框架模板

## 项目概述

这是一个基于 **uni-app** 框架的 Vue 3 项目模板，使用 TypeScript 开发，集成了 uview-plus 组件库、Pinia 状态管理、UnoCSS 原子化样式、ESLint + Prettier 代码规范、请求封装等完整开发能力。

## 目录结构

```
uniapp-framework/
├── src/                          # 源代码目录
│   ├── api/                      # API 接口目录
│   │   └── user.ts               # 用户相关接口示例
│   ├── components/               # 公共组件目录
│   ├── pages/                    # 页面目录
│   ├── static/                   # 静态资源
│   ├── store/                    # Pinia 状态管理
│   ├── utils/                    # 工具函数目录
│   │   ├── common.ts             # 通用工具（toast、confirm、参数序列化）
│   │   ├── errorCode.ts          # HTTP 错误码统一处理
│   │   ├── request.ts            # uni.request 统一请求封装
│   │   └── token.ts              # Token 本地存储管理
│   ├── App.vue                   # 应用入口组件
│   ├── main.ts                   # 应用入口文件（初始化 Pinia、uview-plus）
│   ├── manifest.json             # uni-app 应用配置（appid、权限、各端配置）
│   ├── pages.json                # 页面路由与全局样式配置
│   ├── uni.scss                  # 全局 SCSS 变量
│   ├── env.d.ts                  # 环境变量类型声明
│   └── shime-uni.d.ts            # uni-app 全局类型补充
├── types/                        # 类型声明目录
├── .env.development              # 开发环境变量
├── .env.production               # 生产环境变量
├── .eslintrc.yaml                # ESLint 配置
├── .eslintrc-auto-import.json    # ESLint 自动导入兼容配置
├── .prettierrc.yaml              # Prettier 格式化配置
├── .eslintignore / .prettierignore  # 忽略配置
├── unocss.config.ts              # UnoCSS 原子化 CSS 配置
├── tsconfig.json                 # TypeScript 编译配置
├── vite.config.ts                # Vite 构建配置（代理、别名、插件）
├── index.html                    # H5 入口 HTML
├── package.json                  # 项目依赖与脚本配置
└── shims-uni.d.ts                # 根目录 uni-app 类型补充
```

## 快速开始

### 1. 安装依赖

```bash
pnpm install
```

> 如果尚未安装 pnpm，执行：`npm install -g pnpm`

### 2. 启动开发服务

#### H5 端

```bash
pnpm run dev:h5
```

#### H5 SSR 端

```bash
pnpm run dev:h5:ssr
```

#### 微信小程序

```bash
pnpm run dev:mp-weixin
```

编译后使用微信开发者工具打开 `dist/dev/mp-weixin` 目录。

> 更多平台脚本见`package.json`的`scripts`。

## 开发命令

### 构建发布（build）

对应开发命令将 `dev` 替换为 `build` 即可，例如：

```bash
pnpm run build:h5          # 构建 H5 -> dist/build/h5
pnpm run build:mp-weixin   # 构建微信小程序 -> dist/build/mp-weixin
```

### 代码质量

```bash
pnpm run type-check     # TypeScript 类型检查
pnpm run lint           # ESLint 检查 src 目录
pnpm run lint:all       # ESLint 检查整个项目
```

## 注意事项

1. **发行建议**：生产环境发行原生 App / 小程序审核包时，建议使用 **HBuilder X** 进行发行。
2. **IDE 推荐**：日常编码使用 **VS Code**，并确保已安装 ESLint、Prettier、Volar、UnoCSS 插件以获得最佳开发体验。
3. **本项目可用于学习与交流**，如发现问题或建议可在评论区留言，看到会处理。

## License

详见 [LICENSE](./LICENSE)。