# vue_admin_article

**Repository Path**: sakura_cjy/vue_admin_article

## Basic Information

- **Project Name**: vue_admin_article
- **Description**: 一个基于 Vue 3 + TypeScript + Element Plus 开发的文章后台管理系统模板，具有完整的用户认证、内容管理和用户管理功能。完整的后端：https://gitee.com/sakura_cjy/api_server_article.git。这个前后端分离项目为个人练习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-20
- **Last Updated**: 2026-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, Element-UI

## README

# Vue_Admin

一个基于 Vue 3 + TypeScript + Element Plus 开发的后台管理系统模板，具有完整的用户认证、内容管理和用户管理功能。

## 技术栈

- **前端框架**: Vue 3
- **TypeScript**: 类型支持
- **状态管理**: Pinia
- **路由管理**: Vue Router
- **UI 组件库**: Element Plus
- **HTTP 客户端**: Axios
- **构建工具**: Vite
- **CSS 框架**: Windi CSS

## 项目结构

```
Vue_Admin/
├── public/              # 静态资源
├── src/
│   ├── api/            # API 接口定义
│   ├── assets/         # 静态资源
│   ├── pages/          # 页面组件
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia 状态管理
│   ├── utils/          # 工具函数
│   ├── views/          # 视图组件
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── .gitignore
├── README.md
├── env.d.ts
├── index.html
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```

## 功能模块

1. **用户认证**
   - 登录页面
   - 注册页面
   - 用户信息管理

2. **内容管理**
   - 文章列表
   - 文章详情
   - 文章编辑
   - 分类管理

3. **用户管理**
   - 用户列表
   - 用户详情

4. **系统设置**
   - 个人设置

## 推荐 IDE 设置

[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur)。

## 推荐浏览器设置

- 基于 Chromium 的浏览器 (Chrome, Edge, Brave 等):
  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
  - [在 Chrome DevTools 中开启自定义对象格式化器](http://bit.ly/object-formatters)
- Firefox:
  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
  - [在 Firefox DevTools 中开启自定义对象格式化器](https://fxdx.dev/firefox-devtools-custom-object-formatters/)

## TypeScript 支持

TypeScript 默认无法处理 `.vue` 导入的类型信息，因此我们使用 `vue-tsc` 替代 `tsc` CLI 进行类型检查。在编辑器中，我们需要 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 来使 TypeScript 语言服务识别 `.vue` 类型。

## 配置定制

查看 [Vite 配置参考](https://vite.dev/config/)。

## 项目设置

```sh
npm install
```

### 开发环境编译和热重载

```sh
npm run dev
```

### 类型检查、编译和生产环境构建

```sh
npm run build
```

## API 接口

项目包含以下 API 接口模块：

- `api/admin.ts` - 管理员相关接口
- `api/artcate.ts` - 文章分类相关接口
- `api/article.ts` - 文章相关接口
- `api/user.ts` - 用户相关接口

## 工具函数

- `utils/request.ts` - Axios 请求封装
- `utils/compressImage.ts` - 图片压缩工具

## 注意事项

- 项目使用 Node.js 20.19.0 或更高版本
- 构建过程中可能会有一些警告，这是正常现象
- 建议使用 Chromium 系列浏览器以获得最佳体验