198 lines
4.4 KiB
Markdown
198 lines
4.4 KiB
Markdown
# Vite Vue3 Template
|
|
|
|
> 一个开箱即用的 Vue3 + Vite 项目模板，采用模块化架构设计，适合快速构建中大型 Vue 应用。
|
|
|
|
---
|
|
|
|
## 技术栈
|
|
|
|
| 技术 | 版本 | 用途 |
|
|
| ------------ | ------- | ---------- |
|
|
| Vue | ^3.4.37 | 核心框架 |
|
|
| Vite | ^5.4.1 | 构建工具 |
|
|
| Vue Router | 4 | 路由管理 |
|
|
| Vuex | ^4.0.2 | 状态管理 |
|
|
| Element Plus | ^2.8.1 | UI 组件库 |
|
|
| Axios | ^1.7.7 | HTTP 请求 |
|
|
| Tailwind CSS | ^3.4.10 | 原子化 CSS |
|
|
| Less | ^4.2.0 | CSS 预处理 |
|
|
| Sass | ^1.77.8 | CSS 预处理 |
|
|
|
|
---
|
|
|
|
## 目录结构
|
|
|
|
```
|
|
vite-vue3-template/
|
|
├── public/ # 公共静态资源
|
|
├── src/
|
|
│ ├── api/ # API 接口管理
|
|
│ ├── assets/ # 静态资源
|
|
│ │ ├── images/ # 图片资源
|
|
│ │ └── styles/ # 样式文件
|
|
│ ├── components/ # 公共组件
|
|
│ ├── layouts/ # 布局组件
|
|
│ ├── plugins/ # 插件配置
|
|
│ ├── router/ # 路由配置
|
|
│ ├── store/ # Vuex 状态管理
|
|
│ ├── utils/ # 工具函数
|
|
│ ├── views/ # 页面视图
|
|
│ ├── App.vue # 根组件
|
|
│ └── main.js # 入口文件
|
|
├── index.html # HTML 模板
|
|
├── vite.config.js # Vite 配置
|
|
├── package.json # 项目配置
|
|
└── README.md # 项目说明
|
|
```
|
|
|
|
---
|
|
|
|
## 快速开始
|
|
|
|
### 1. 克隆项目
|
|
|
|
```bash
|
|
git clone <repository-url>
|
|
cd vite-vue3-template
|
|
```
|
|
|
|
### 2. 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
# 或使用 pnpm
|
|
pnpm install
|
|
# 或使用 yarn
|
|
yarn install
|
|
```
|
|
|
|
### 3. 启动开发服务器
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
访问 http://localhost:5173 查看项目
|
|
|
|
### 4. 生产构建
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
构建产物将输出到 `dist` 目录
|
|
|
|
### 5. 预览构建结果
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
### 6. 清理项目（可选）
|
|
|
|
```bash
|
|
npm run rf
|
|
```
|
|
|
|
清除 `dist` 目录和 `node_modules`
|
|
|
|
---
|
|
|
|
## 项目特性
|
|
|
|
### 核心功能
|
|
|
|
- ✅ **模块化架构** - 清晰的目录结构，易于维护和扩展
|
|
- ✅ **组件自动导入** - 本地组件和 Element Plus 按需自动导入
|
|
- ✅ **路由模块化管理** - 按功能拆分路由，统一路由守卫
|
|
- ✅ **Vuex 持久化** - 自动持久化用户数据和配置
|
|
- ✅ **Axios 封装** - 统一的请求拦截、错误处理
|
|
- ✅ **智能代码分包** - Vue 核心库和 Element Plus 独立打包
|
|
|
|
### 开发体验
|
|
|
|
- 🚀 **快速热更新** - Vite 提供极速的开发体验
|
|
- 📦 **路径别名** - 使用 `@` 简化导入路径
|
|
- 🎨 **多样式方案** - 支持 Less、SCSS、Tailwind CSS
|
|
- 🌐 **开发代理** - 内置 `/api` 代理配置
|
|
- 📝 **工具函数** - 验证、格式化、存储等常用工具
|
|
|
|
### 生产优化
|
|
|
|
- ⚡ **esbuild 压缩** - 更快的构建速度
|
|
- 🧹 **自动清理** - 生产环境移除 console 和 debugger
|
|
- 📊 **代码拆分** - CSS 和 JS 自动拆分
|
|
- 🔒 **Source Map 关闭** - 保护源码，减小包体积
|
|
|
|
---
|
|
|
|
## 配置说明
|
|
|
|
### 路径别名
|
|
|
|
在 [vite.config.js:34-40](vite.config.js#L34-L40) 中配置了路径别名，可在项目中使用：
|
|
|
|
```js
|
|
import MyComponent from '@/components/MyComponent.vue'
|
|
```
|
|
|
|
### 开发代理
|
|
|
|
开发环境下，`/api` 请求会被代理到后端服务：
|
|
|
|
```js
|
|
// vite.config.js
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:3000', // 后端地址
|
|
changeOrigin: true,
|
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
|
}
|
|
}
|
|
```
|
|
|
|
### Vuex 持久化
|
|
|
|
在 [src/store/index.js](src/store/index.js) 中配置了持久化，自动保存以下数据：
|
|
|
|
```js
|
|
{
|
|
user: {
|
|
userData: state.user.userData,
|
|
token: state.user.token,
|
|
},
|
|
app: {
|
|
theme: state.app.theme,
|
|
language: state.app.language,
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 添加新功能
|
|
|
|
### 添加新页面
|
|
|
|
1. 在 `src/views/` 下创建页面组件
|
|
2. 在 `src/router/modules/` 下创建路由模块
|
|
3. 在 `src/router/index.js` 中引入路由模块
|
|
|
|
### 添加新 API
|
|
|
|
1. 在 `src/api/modules/` 下创建 API 模块
|
|
2. 在 `src/api/index.js` 中导出
|
|
|
|
### 添加新状态
|
|
|
|
1. 在 `src/store/modules/` 下创建状态模块
|
|
2. 在 `src/store/index.js` 中注册模块
|
|
|
|
### 添加新组件
|
|
|
|
创建在 `src/components/base/` 或 `src/components/common/` 下，组件会自动导入。
|
|
|
|
## License
|
|
|
|
[Apache-2.0 license](./LICENSE)
|