# vue-manage-system

**Repository Path**: duans/vue-manage-system

## Basic Information

- **Project Name**: vue-manage-system
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-10
- **Last Updated**: 2026-10-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-manage-system

基于 Vue 3 的电商后台管理系统，包含账号、角色、权限、菜单、部门、职位、员工、商品分类、商品、规格、SKU 等管理模块。

## 技术栈

| 分类 | 技术 | 说明 |
| --- | --- | --- |
| 视图框架 | Vue 3（`<script setup>` SFC） | 组合式 API |
| 构建工具 | Vite 7 | 开发服务器 + 生产构建 |
| UI 组件库 | Element Plus 2 | 通过 `unplugin-vue-components` / `unplugin-auto-import` 按需引入，支持暗黑主题 |
| 状态管理 | Pinia 4 | setup 语法，CRUD store 由工厂统一生成 |
| 路由 | Vue Router 5 | hash 模式，懒加载 + 全局前置守卫 |
| HTTP | Axios | 单实例 + 统一请求/响应拦截器 |
| 富文本 | wangEditor 5 | 仅在首页与商品编辑中异步加载 |
| 其它 | element-china-area-data | 省市区级联数据 |

## 目录约定

```
src/
├── api/            # 数据接口层：按业务领域聚合，页面禁止直连 axios
├── components/     # 公共组件
├── composables/    # 组合式函数：useTable(分页) / useDebounce(防抖+竞态)
├── pages/          # 页面组件，按业务模块分目录
├── router/         # 路由与全局守卫
├── store/          # Pinia 数据仓库：auth(登录态) + 各业务 store(工厂生成)
└── utils/          # http 实例、工具函数、常量配置
```

分层数据流：`pages` → `api/` → `utils/http.js` → 代理 → 后端；登录态统一由 `store/auth.js` 提供。

## 环境变量

复制 `.env.example` 为 `.env.local`（本地私有配置，不入库）：

| 变量 | 说明 |
| --- | --- |
| `VITE_API_BASE_URL` | 后端服务地址，用于开发服务器代理 `/api` 与 `/media` |
| `VITE_DEV_ACCOUNT` | 开发环境登录页预填账号，格式 `用户名:密码`，留空则不预填 |

## 常用命令

```bash
npm install      # 安装依赖
npm run dev      # 启动开发服务器
npm run build    # 生产构建
npm run preview  # 预览构建产物
npm run lint     # ESLint 检查并自动修复
npm run format   # Prettier 格式化
```

## 开发约定

1. 所有接口调用统一写在 `src/api/` 中，页面通过 `xxxApi` 调用，不再出现 URL 字面量与裸 `axios`。
2. 分页列表页使用 `src/composables/useTable.js`，远程搜索使用 `useDebounce`（已内置请求竞态处理）。
3. 登录信息、当前角色、按钮权限统一从 `store/auth.js` 读取，禁止在业务代码中直接解析 `localStorage`。
4. 组件 `props` 不要解构使用，避免丢失响应式；对象类型 `default` 使用工厂函数。
5. 生产构建会移除 `console` 与 `debugger`，并自动生成 `auto-imports.d.ts` / `components.d.ts`（需纳入版本库）。