135 lines
3.4 KiB
Markdown
135 lines
3.4 KiB
Markdown
|
# 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
|
|||
|
|
<template>
|
|||
|
|
<el-button type="primary">按钮</el-button>
|
|||
|
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📝 开发规范
|
|||
|
|
|
|||
|
|
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
|