📘
Vue 项目架构 · 30 章
✨ 从零搭建
🧩 可维护
Vite + Vue3 + TS
⚡ 生产级
01
项目初始化
Vite
创建Vue3+TS项目，理解目录结构
02
代码规范
ESLint+Prettier
统一风格，配置校验规则
03
Git工作流
Flow
初始化仓库，分支管理策略
04
路由架构
Vue Router
模块化配置，动态路由加载
05
状态管理
Pinia
Store模块化，响应式数据流
06
HTTP请求封装
Axios
统一拦截、错误处理
07
环境变量管理
.env
开发/测试/生产环境配置
08
UI组件库
Element Plus
按需引入，主题变量
09
布局系统设计
通用后台
侧边栏、顶栏、内容区
10
权限管理
RBAC
角色路由控制，动态菜单
11
国际化方案
vue-i18n
多语言切换，语言包管理
12
工具函数库
utils
日期、深拷贝、防抖节流
13
自定义指令
v-permission
权限、防抖、复制指令
14
组件库开发
业务组件
按需加载，文档化
15
Mock数据方案
MSW
模拟后端，并行开发
16
单元测试
Vitest
组件与逻辑函数测试
17
E2E测试
Playwright
端到端测试流程
18
构建优化
Vite
代码分割、懒加载、Tree Shaking
19
性能监控
Web Vitals
性能数据采集上报
20
错误监控
Sentry
前端异常捕获
21
日志系统
分级日志
远程上报
22
主题切换
深色/浅色
CSS变量动态换肤
23
文件上传组件
断点续传
预览、进度条
24
富文本编辑器
Quill
自定义工具栏，图片上传
25
图表可视化
ECharts
响应式图表组件
26
地图组件
Leaflet
标记点、信息窗口
27
WebSocket通信
实时推送
重连机制
28
PWA支持
Service Worker
离线缓存，桌面快捷方式
29
CI/CD流水线
GitHub Actions
自动构建、测试、部署
30
项目文档
VitePress
组件文档站，README