# 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)