Vue 3 + TypeScript 企业级开发模板

一个现代化的 Vue 3 + TypeScript 企业级开发模板，集成了最新的前端技术和最佳实践。

• ⚡️ Vue 3 - 使用 Composition API 和 <script setup> 语法
• 🛠️ TypeScript - 完整的类型支持
• 🚀 Vite - 快速的构建工具
• 🎨 Element Plus - 丰富的 UI 组件库
• 📦 Pinia - 现代化的状态管理
• 🌐 Vue Router 4 - 路由管理
• 🌍 Vue I18n - 国际化支持
• 🔒 权限控制 - 路由守卫和权限管理
• 🎯 代码规范 - ESLint + Prettier
• 🧪 单元测试 - Vitest + Vue Test Utils
• 📱 响应式设计 - 移动端适配
• 🎨 主题切换 - 明暗主题支持

• 前端框架: Vue 3.4
• 构建工具: Vite 5.0
• 开发语言: TypeScript 5.3
• UI 组件库: Element Plus 2.4
• 状态管理: Pinia 2.1
• 路由管理: Vue Router 4.2
• HTTP 客户端: Axios 1.6
• CSS 预处理器: SCSS
• 代码规范: ESLint + Prettier
• 测试框架: Vitest + Vue Test Utils

• Node.js >= 16.0.0
• npm >= 7.0.0

npm install

npm run dev

npm run build

# ESLint 检查
npm run lint

# TypeScript 类型检查
npm run type-check

# 运行测试
npm run test

src/
├── api/           # API 接口
├── assets/        # 静态资源
├── components/    # 公共组件
├── locales/       # 国际化
├── router/        # 路由配置
├── stores/        # 状态管理
├── styles/        # 样式文件
├── types/         # 类型定义
├── utils/         # 工具函数
├── views/         # 页面组件
├── App.vue        # 根组件
└── main.ts        # 入口文件

1. 在 src/views/ 目录下创建页面组件
2. 在 src/router/index.ts 中添加路由配置
3. 如需权限控制，在路由的 meta 中设置 requiresAuth: true

1. 在 src/api/ 目录下创建对应的 API 文件
2. 使用 request 工具发送请求
3. 定义 TypeScript 接口类型

1. 修改 src/styles/variables.scss 中的 SCSS 变量
2. 在组件中使用 CSS 变量进行主题切换

• .env.development - 开发环境配置
• .env.production - 生产环境配置

• 代理配置：vite.config.ts 中的 server.proxy
• 构建优化：build 配置项
• 路径别名：@ 指向 src 目录

• 使用 Composition API 和 <script setup>
• 组件按功能模块划分
• API 接口统一管理
• 类型定义完整清晰

• 组件懒加载
• 图片资源优化
• 代码分割和摇树优化
• 缓存策略配置

• XSS 防护
• CSRF 防护
• 权限验证
• 输入验证

1. Fork 本项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

本项目采用 MIT 许可证。

感谢以下开源项目的贡献：

• Vue.js
• Vite
• Element Plus
• TypeScript

Happy Coding! 🎉