# vue-admin-template

**Repository Path**: linjunbin0101/vue-admin-template

## Basic Information

- **Project Name**: vue-admin-template
- **Description**: 这是一个基于 Vue3、Vite、Element Plus、Axios、Pinia、Vue Router、SCSS 和 Tailwind CSS 的现代化前端基础框架，提供了完整的开发环境和常用功能封装
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Vite + Element Plus 基础框架

这是一个基于 Vue3、Vite、Element Plus、Axios、Pinia、Vue Router、SCSS 和 Tailwind CSS 的现代化前端基础框架，提供了完整的开发环境和常用功能封装。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架，使用 Composition API
- **Vite** - 下一代前端构建工具，提供快速的开发体验
- **Element Plus** - Vue 3 的 UI 组件库，提供丰富的组件
- **Axios** - HTTP 客户端，用于 API 请求
- **Pinia** - Vue 状态管理库，支持组合式 API
- **Vue Router** - Vue 官方路由管理器
- **SCSS** - CSS 预处理器，增强样式编写能力
- **Tailwind CSS** - 实用优先的 CSS 框架，快速构建响应式界面
- **TypeScript** - JavaScript 的超集，提供类型安全

## 项目结构

```
├── src/
│   ├── api/              # API 请求配置和封装
│   │   └── index.ts      # Axios 实例和请求方法
│   ├── components/        # 公共组件
│   │   ├── MyCard.vue    # 卡片组件
│   │   ├── MyModal.vue   # 模态框组件
│   │   └── MyTable.vue   # 表格组件
│   ├── hooks/            # 自定义 Hooks
│   │   └── useRequest.ts # 请求状态管理 Hook
│   ├── router/           # 路由配置
│   │   └── index.ts      # Vue Router 配置
│   ├── stores/           # Pinia 状态管理
│   │   └── index.ts      # 示例 Store
│   ├── views/            # 页面组件
│   │   ├── layout/       # 布局组件
│   │   │   ├── Content.vue    # 内容区域
│   │   │   ├── Header.vue     # 头部
│   │   │   ├── Sidebar.vue    # 侧边栏
│   │   │   └── index.vue      # 布局入口
│   │   ├── order/        # 订单管理
│   │   │   ├── list/         # 订单列表
│   │   │   │   └── index.vue  # 订单列表页面
│   │   │   └── refund/        # 退款管理
│   │   │       └── index.vue  # 退款管理页面
│   │   ├── product/       # 产品管理
│   │   │   ├── category/      # 产品分类
│   │   │   │   └── index.vue  # 产品分类页面
│   │   │   └── list/          # 产品列表
│   │   │       └── index.vue  # 产品列表页面
│   │   └── system/        # 系统管理
│   │       ├── role/           # 角色管理
│   │       │   └── index.vue   # 角色管理页面
│   │       └── user/           # 用户管理
│   │           ├── components/   # 用户管理组件
│   │           │   └── FormModal.vue # 表单模态框
│   │           └── index.vue     # 用户管理页面
│   ├── App.vue           # 根组件
│   ├── main.ts           # 应用入口
│   ├── style.scss        # 全局样式（包含 Tailwind 指令）
│   ├── counter.ts        # 计数器示例
│   ├── env.d.ts          # 环境变量类型声明
│   └── typescript.svg    # TypeScript 图标
├── public/               # 静态资源
│   └── vite.svg          # Vite 图标
├── .env.example          # 环境变量示例
├── .gitignore            # Git 忽略配置
├── README.md             # 项目说明
├── index.html            # HTML 模板
├── package.json          # 项目配置
├── pnpm-lock.yaml        # pnpm 依赖锁文件
├── postcss.config.ts     # PostCSS 配置
├── tailwind.config.ts    # Tailwind CSS 配置
├── tsconfig.json         # TypeScript 配置
└── vite.config.ts        # Vite 配置
```

## 功能特性

### 1. Element Plus 集成
- 完整的 UI 组件库，提供丰富的界面元素
- 主题配置支持，可自定义样式
- 响应式设计，适配不同屏幕尺寸

### 2. Axios 封装
- 统一的请求拦截器，自动添加认证信息
- 统一的响应拦截器，处理返回数据
- 错误统一处理，简化错误处理逻辑
- 支持 TypeScript 类型定义

### 3. Pinia 状态管理
- 响应式状态管理，支持组合式 API
- TypeScript 类型支持，提供类型安全
- 模块化设计，易于维护和扩展

### 4. Vue Router
- 基于文件的路由配置，清晰易管理
- 路由懒加载，优化首屏加载速度
- 导航守卫支持，控制路由访问权限

### 5. Tailwind CSS
- 实用优先的 CSS 类，快速构建界面
- 响应式设计，适配不同设备
- 深色模式支持，提升用户体验
- 自定义主题配置，满足品牌需求

### 6. 自定义 Hooks
- `useRequest` - 请求状态管理 Hook，简化 API 调用
- 支持自动执行和手动执行
- 内置 Loading、Error 状态管理
- 类型安全，支持泛型

### 7. 示例页面
- **用户管理** - 完整的用户CRUD操作，包括新增、编辑、删除功能
- **产品管理** - 产品列表和分类管理
- **订单管理** - 订单列表和退款管理
- **角色管理** - 系统角色管理

### 8. 功能特性
- **确认删除弹窗** - 防止误操作，提供删除确认机制
- **新增/编辑弹窗** - 统一的表单弹窗，支持新增和编辑操作
- **构建优化** - 代码分割和chunking优化，提升加载速度
- **响应式布局** - 适配不同屏幕尺寸
- **TypeScript 类型安全** - 完整的类型定义，提供类型安全

## 开发指南

### 安装依赖
```bash
pnpm install
```

### 启动开发服务器
```bash
pnpm dev
```
服务将在 `http://localhost:5000` 启动

### 构建生产版本
```bash
pnpm build
```
构建产物将输出到 `dist` 目录

### 预览生产版本
```bash
pnpm preview
```

## 快速开始

### 创建新的页面组件
1. 在 `src/views/` 目录下创建新的 `.vue` 文件
2. 在 `src/router/index.ts` 中添加路由配置

### 创建新的 Store
1. 在 `src/stores/` 目录下创建新的 store 文件
2. 使用 `defineStore` 定义状态和操作

### 创建新的 Hook
1. 在 `src/hooks/` 目录下创建新的 hook 文件
2. 遵循 Vue 3 Composition API 规范

### 添加 API 接口
1. 在 `src/api/` 目录下创建 API 文件
2. 使用封装好的 `request` 对象发起请求

## 环境变量配置

项目包含 `.env.example` 文件，可根据需要复制为 `.env` 并修改配置：

```env
# API 基础 URL
VITE_API_BASE_URL=/api

# 应用标题
VITE_APP_TITLE=Vue3 Framework

# 是否启用开发模式
VITE_DEV_MODE=true
```

如需添加新的环境变量：
1. 在 `.env` 文件中添加 `VITE_` 开头的变量
2. 在代码中使用 `import.meta.env.VITE_XXX` 访问
3. 在 `src/env.d.ts` 中添加类型声明

## 配置说明

### Tailwind CSS
配置文件位于 `tailwind.config.js`，可以自定义主题、颜色、字体等。

### Vite
配置文件位于 `vite.config.ts`，可以配置别名、插件、构建选项等。

### TypeScript
配置文件位于 `tsconfig.json`，可以配置类型检查、编译选项等。

### PostCSS
配置文件位于 `postcss.config.js`，用于处理 CSS 编译。

## 最佳实践

1. **样式管理**：优先使用 Tailwind CSS 实用类，复杂样式使用 SCSS
2. **文件引用**：使用 `@/` 别名引用 `src` 目录下的文件
3. **API 请求**：统一使用 `src/api/index.ts` 中的 `request` 对象
4. **状态管理**：使用 Pinia 进行状态管理，遵循模块化设计
5. **组件设计**：拆分为小型、可复用的组件
6. **类型安全**：充分利用 TypeScript 提供类型定义
7. **代码风格**：保持一致的代码风格，使用 eslint 和 prettier

## 示例代码

### API 调用示例
```typescript
import { request } from '@/api'

// GET 请求
const data = await request.get('/api/users')

// POST 请求
const result = await request.post('/api/login', { username: 'admin', password: '123456' })
```

### 状态管理示例
```typescript
import { useAppStore } from '@/stores'

const store = useAppStore()
store.increment() // 增加计数
console.log(store.count) // 获取计数
```

### 自定义 Hook 示例
```typescript
import { useRequest } from '@/hooks/useRequest'

const { data, loading, error, execute } = useRequest(() => {
  return request.get('/api/data')
}, { immediate: true })

// 手动执行
const fetchData = () => {
  execute()
}
```

## 注意事项

1. 确保安装了 pnpm 包管理器
2. 开发环境下，API 请求会被 Vite 代理到后端服务
3. 生产环境构建前，确保配置了正确的环境变量
4. 提交代码前，确保通过 TypeScript 类型检查

## License

MIT