147 lines
4.4 KiB
Markdown
147 lines
4.4 KiB
Markdown
# Admin Snack — 零食商城管理后台
|
||
|
||
基于 **Vue 3 + Vite 6 + TypeScript 5 + Element Plus** 的现代化电商管理后台。
|
||
|
||
## 技术栈
|
||
|
||
| 类别 | 技术 |
|
||
|------|------|
|
||
| 框架 | Vue 3.5 (Composition API + `<script setup>`) |
|
||
| 语言 | TypeScript 5 |
|
||
| 构建 | Vite 6 |
|
||
| 路由 | Vue Router 4 |
|
||
| 状态 | Pinia 2 + 持久化 |
|
||
| UI 库 | Element Plus 2.9 |
|
||
| 工具类 | UnoCSS（辅助） |
|
||
| 图表 | ECharts 5 + vue-echarts |
|
||
| HTTP | Axios |
|
||
| 工具 | dayjs、lodash-es、mitt、nprogress、VueUse |
|
||
| 代码规范 | ESLint 9 + Prettier 3 |
|
||
| Node 要求 | ≥ 20 |
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 1. 安装依赖
|
||
npm install
|
||
|
||
# 2. 启动开发服务器
|
||
npm run dev
|
||
# 访问 http://localhost:5173
|
||
|
||
# 3. 生产构建
|
||
npm run build:prod
|
||
|
||
# 4. 类型检查
|
||
npm run type-check
|
||
|
||
# 5. 代码格式化
|
||
npm run format
|
||
```
|
||
|
||
## 默认账号
|
||
|
||
```
|
||
用户名：admin
|
||
密 码：123456
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
admin-snack/
|
||
├── public/ # 不经 vite 处理的静态资源
|
||
│ └── favicon.svg
|
||
├── src/
|
||
│ ├── api/ # 接口请求层（按业务模块划分）
|
||
│ │ ├── auth.ts
|
||
│ │ ├── dashboard.ts
|
||
│ │ ├── product.ts
|
||
│ │ ├── order.ts
|
||
│ │ └── ...
|
||
│ ├── assets/ # 静态资源
|
||
│ ├── components/ # 公共组件
|
||
│ │ ├── common/
|
||
│ │ └── business/
|
||
│ ├── hooks/ # 组合式函数
|
||
│ ├── layouts/ # 布局
|
||
│ │ ├── BasicLayout.vue # 主框架（侧边栏+顶栏+内容区）
|
||
│ │ └── components/
|
||
│ │ ├── SideMenu.vue
|
||
│ │ └── NavBreadcrumb.vue
|
||
│ ├── permission.ts # 路由守卫
|
||
│ ├── router/ # 路由
|
||
│ │ ├── index.ts # 基础路由
|
||
│ │ └── async-routes.ts # 业务路由（按权限动态挂载）
|
||
│ ├── stores/ # Pinia
|
||
│ │ ├── index.ts
|
||
│ │ └── modules/
|
||
│ │ ├── user.ts # 用户/管理员
|
||
│ │ └── app.ts # 应用全局
|
||
│ ├── styles/ # 全局样式
|
||
│ │ ├── variables.scss # 设计系统令牌
|
||
│ │ ├── reset.scss
|
||
│ │ ├── element.scss # Element Plus 主题覆盖
|
||
│ │ ├── transitions.scss
|
||
│ │ └── index.scss
|
||
│ ├── types/ # TS 类型
|
||
│ │ ├── api.ts
|
||
│ │ └── auth.ts
|
||
│ ├── utils/ # 工具
|
||
│ │ ├── request.ts # axios 封装
|
||
│ │ ├── date.ts # dayjs 封装
|
||
│ │ ├── dict.ts # 业务字典
|
||
│ │ └── bus.ts # mitt 事件总线
|
||
│ ├── views/ # 页面
|
||
│ │ ├── login/index.vue
|
||
│ │ ├── dashboard/index.vue
|
||
│ │ ├── product/
|
||
│ │ ├── order/
|
||
│ │ ├── user/
|
||
│ │ ├── coupon/
|
||
│ │ ├── seckill/
|
||
│ │ ├── notice/
|
||
│ │ ├── chat/
|
||
│ │ └── error/404.vue
|
||
│ ├── App.vue
|
||
│ └── main.ts
|
||
├── .env.development # 开发环境变量
|
||
├── .env.test # 测试环境变量
|
||
├── .env.production # 生产环境变量
|
||
├── eslint.config.js
|
||
├── .prettierrc.json
|
||
├── index.html
|
||
├── package.json
|
||
├── tsconfig.json
|
||
├── tsconfig.node.json
|
||
├── uno.config.ts
|
||
└── vite.config.ts
|
||
```
|
||
|
||
## 设计系统
|
||
|
||
| 项 | 值 |
|
||
|----|----|
|
||
| 风格 | Minimalism · Data-Dense Dashboard |
|
||
| 主色 | `#1E40AF`（深蓝）/ `#3B82F6`（亮蓝） |
|
||
| 辅色 | `#60A5FA` |
|
||
| 状态色 | success `#10B981` / warning `#F59E0B` / danger `#EF4444` |
|
||
| 字体 | 系统字体栈（PingFang SC / Microsoft YaHei） |
|
||
| 圆角 | 卡片 `10px`、按钮 `6px`、输入框 `10px` |
|
||
| 阴影 | 三档（sm / md / lg） |
|
||
| 背景 | 页面 `#F8FAFC`、卡片 `#FFFFFF` |
|
||
|
||
## 后端联调
|
||
|
||
`.env.development` 中配置：
|
||
|
||
```
|
||
VITE_API_BASE_URL=http://localhost:8080
|
||
```
|
||
|
||
`vite.config.ts` 已配置 `/api` 与 `/uploads` 路径代理到后端 `server-snack` 项目。
|
||
|
||
## 浏览器支持
|
||
|
||
现代浏览器 + ES2020（Chrome 90+, Edge 90+, Firefox 90+, Safari 14+）
|