174 lines
4.1 KiB
Markdown
174 lines
4.1 KiB
Markdown
###
|
||
- **核心框架**：Vue 3.5.x
|
||
- **开发语言**：TypeScript 5.8.x
|
||
- **构建工具**：Vite 6.2.x
|
||
- **UI组件库**：Naive UI 2.41.x
|
||
- **状态管理**：Pinia 3.0.x
|
||
- **路由**：Vue Router 4.5.x
|
||
- **HTTP客户端**：Axios/Alova
|
||
- **CSS**：UnoCSS
|
||
- **包管理器**：pnpm 8.x+
|
||
|
||
## 🏗️ 项目结构
|
||
|
||
```
|
||
root
|
||
├── build # 构建配置和插件
|
||
│ ├── config # 构建配置文件
|
||
│ └── plugins # Vite 插件
|
||
├── docs # 文档和模板
|
||
│ ├── java # 代码生成工具类
|
||
│ └── template # 代码生成模板
|
||
├── packages # Monorepo包
|
||
│ ├── alova # 使用Alova的HTTP客户端实现
|
||
│ ├── axios # 使用Axios的HTTP客户端实现
|
||
│ ├── color # 颜色管理工具
|
||
│ ├── hooks # 可复用的Vue组合函数
|
||
│ ├── materials # UI组件和材料
|
||
│ ├── ofetch # 使用ofetch的HTTP客户端实现
|
||
│ ├── scripts # 构建和开发脚本
|
||
│ ├── uno-preset # UnoCSS预设配置
|
||
│ └── utils # 通用工具函数
|
||
├── public # 静态资源
|
||
├── src # 主应用源代码
|
||
│ ├── assets # 静态资源(图片、图标)
|
||
│ ├── components # 可复用的 Vue 组件
|
||
│ ├── constants # 应用常量
|
||
│ ├── enum # TypeScript 枚举
|
||
│ ├── hooks # Vue 组合函数
|
||
│ ├── layouts # 页面布局
|
||
│ ├── locales # 国际化
|
||
│ ├── plugins # Vue 插件
|
||
│ ├── router # Vue Router 配置
|
||
│ ├── service # API 服务
|
||
│ ├── store # Pinia 存储模块
|
||
│ ├── styles # 全局样式
|
||
│ ├── theme # 主题配置
|
||
│ ├── typings # TypeScript 类型定义
|
||
│ ├── utils # 工具函数
|
||
│ └── views # 页面组件
|
||
└── vite.config.ts # Vite 配置
|
||
```
|
||
|
||
## 🚀 环境要求与安装
|
||
|
||
### 环境要求
|
||
- Node.js >= 18.20.0
|
||
- pnpm >= 8.7.0
|
||
- Git
|
||
|
||
### 安装步骤及说明
|
||
|
||
1. 初始化版本
|
||
|
||
2. 安装 pnpm (如果未安装)
|
||
|
||
```bash
|
||
npm install pnpm -g
|
||
```
|
||
|
||
设置淘宝镜像
|
||
```bash
|
||
pnpm config set registry https://registry.npmmirror.com
|
||
```
|
||
|
||
3. 安装依赖
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
4. 运行开发服务器
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
5. 构建生产版本
|
||
```bash
|
||
pnpm build
|
||
```
|
||
|
||
### 可用的脚本命令
|
||
|
||
```bash
|
||
# 开发环境
|
||
pnpm dev
|
||
|
||
# 测试环境
|
||
pnpm dev:test
|
||
|
||
# 生产环境
|
||
pnpm dev:prod
|
||
|
||
# 构建生产版本
|
||
pnpm build
|
||
|
||
# 构建开发版本
|
||
pnpm build:dev
|
||
|
||
# 构建测试版本
|
||
pnpm build:test
|
||
|
||
# 预览构建
|
||
pnpm preview
|
||
|
||
# 类型检查
|
||
pnpm typecheck
|
||
|
||
# 代码规范检查并修复
|
||
pnpm lint
|
||
|
||
# 路由生成
|
||
pnpm gen-route
|
||
|
||
# 提交代码
|
||
pnpm commit
|
||
|
||
# 中文提交信息
|
||
pnpm commit:zh
|
||
|
||
# 依赖包更新
|
||
pnpm update-pkg
|
||
|
||
# 清理项目
|
||
pnpm cleanup
|
||
|
||
# 发布新版本
|
||
pnpm release
|
||
```
|
||
|
||
### 核心开发模式
|
||
|
||
#### 状态管理
|
||
使用Pinia进行状态管理，模块位于`src/store/modules`目录：
|
||
- **app**: 应用全局状态
|
||
- **theme**: 主题配置
|
||
- **route**: 路由信息
|
||
- **tab**: 标签页管理
|
||
- **auth**: 认证信息
|
||
- **dict**: 字典管理
|
||
- **notice**: 通知管理
|
||
|
||
#### API交互
|
||
|
||
- **Axios**:
|
||
```typescript
|
||
import { useRequest } from '@/hooks/common/request';
|
||
|
||
const { data, loading, error } = useRequest(() => api.getData(params));
|
||
```
|
||
|
||
- **Hooks使用**:
|
||
```typescript
|
||
// 布尔值管理
|
||
import { useBoolean } from '@sa/hooks';
|
||
const { bool, setTrue, setFalse } = useBoolean();
|
||
|
||
// 加载状态管理
|
||
import { useLoading } from '@sa/hooks';
|
||
const { loading, startLoading, endLoading } = useLoading();
|
||
|
||
// 表格管理
|
||
import { useTable } from '@/hooks/common/table';
|
||
const { tableData, loading, getPaginationData } = useTable(fetchTableData);
|
||
```
|