diff --git a/sau_frontend/README.md b/sau_frontend/README.md new file mode 100644 index 0000000..c62fba7 --- /dev/null +++ b/sau_frontend/README.md @@ -0,0 +1,134 @@ +# Vue3 + Vite 项目 + +一个基于 Vue3、Vite、Element Plus、Pinia、Vue Router 和 Axios 的现代化前端项目模板。 + +## 🚀 特性 + +- ⚡️ **Vite** - 极速的构建工具 +- 🖖 **Vue 3** - 渐进式 JavaScript 框架 +- 🎨 **Element Plus** - 基于 Vue 3 的组件库 +- 🗂 **Vue Router** - 官方路由管理器(WebHash 模式) +- 📦 **Pinia** - 新一代状态管理 +- 🔗 **Axios** - HTTP 请求库(已封装) +- 🎯 **Sass** - CSS 预处理器 +- 📁 **规范化目录结构** - views 存放页面,components 存放组件 +- 🔧 **完整配置** - 包含开发和生产环境配置 + +## 📦 安装 + +```bash +# 安装依赖 +npm install + +# 启动开发服务器 +npm run dev + +# 构建生产版本 +npm run build + +# 预览生产构建 +npm run preview +``` + +## 📁 项目结构 + +``` +src/ +├── api/ # API 接口 +│ ├── index.js # API 统一导出 +│ └── user.js # 用户相关 API +├── components/ # 公共组件 +│ └── HelloWorld.vue # 示例组件 +├── router/ # 路由配置 +│ └── index.js # 路由主文件 +├── stores/ # 状态管理 +│ ├── index.js # Pinia 配置 +│ └── user.js # 用户状态 +├── styles/ # 样式文件 +│ ├── index.scss # 主样式文件 +│ ├── reset.scss # 重置样式 +│ └── variables.scss # 样式变量 +├── utils/ # 工具函数 +│ └── request.js # HTTP 请求封装 +├── views/ # 页面组件 +│ ├── Home.vue # 首页 +│ └── About.vue # 关于页面 +├── App.vue # 根组件 +└── main.js # 入口文件 +``` + +## 🔧 配置说明 + +### 环境变量 + +- `.env` - 通用环境变量 +- `.env.development` - 开发环境变量 +- `.env.production` - 生产环境变量 + +### 路由配置 + +项目使用 Vue Router 4,配置为 WebHash 模式,路由文件位于 `src/router/index.js`。 + +### 状态管理 + +使用 Pinia 进行状态管理,store 文件位于 `src/stores/` 目录。 + +### HTTP 请求 + +Axios 已经过封装,包含: +- 请求/响应拦截器 +- 错误处理 +- Token 自动添加 +- 统一的响应格式处理 + +使用方式: +```javascript +import { http } from '@/utils/request' + +// GET 请求 +const data = await http.get('/api/users') + +// POST 请求 +const result = await http.post('/api/users', { name: 'John' }) +``` + +### 样式系统 + +- 使用 Sass 作为 CSS 预处理器 +- 已删除所有浏览器默认样式 +- 提供了完整的样式变量和工具类 +- 支持 Element Plus 主题定制 + +## 🎨 组件库 + +项目集成了 Element Plus,所有组件都可以直接使用: + +```vue + +``` + +## 📝 开发规范 + +1. **页面组件** 放在 `src/views/` 目录 +2. **公共组件** 放在 `src/components/` 目录 +3. **使用 setup 语法糖** 编写组件 +4. **样式使用 Sass** 并遵循 BEM 命名规范 +5. **API 请求** 统一放在 `src/api/` 目录 +6. **状态管理** 按模块划分,放在 `src/stores/` 目录 + +## 🚀 部署 + +```bash +# 构建生产版本 +npm run build + +# 构建完成后,dist 目录包含所有静态文件 +# 可以部署到任何静态文件服务器 +``` + +## 📄 许可证 + +MIT License