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. 克隆项目

git clone <repository-url>
cd vite-vue3-template

2. 安装依赖

npm install
# 或使用 pnpm
pnpm install
# 或使用 yarn
yarn install

3. 启动开发服务器

npm run dev

访问 http://localhost:5173 查看项目

4. 生产构建

npm run build

构建产物将输出到 dist 目录

5. 预览构建结果

npm run preview

6. 清理项目（可选）

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 中配置了路径别名，可在项目中使用：

import MyComponent from '@/components/MyComponent.vue'

开发代理

开发环境下，/api 请求会被代理到后端服务：

// vite.config.js
proxy: {
  '/api': {
    target: 'http://localhost:3000',  // 后端地址
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
  }
}

Vuex 持久化

在 src/store/index.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