用 Vue3 + TypeScript 打造企业级后台管理系统：完整实战教程
提示词描述：
从零开始构建企业级后台管理系统的完整教程，涵盖项目架构、核心功能、性能优化到部署运维的全流程。采用 Vue3 + TypeScript 技术栈，所有代码都符合企业级开发规范。适合有一定 Vue 基础、想提升项目实战能力的开发者。
提示语关键词：
Vue3后台管理系统,TypeScript实战,Vue3项目架构,Element Plus教程,Vue3企业级开发,Vite配置,Vue3权限管理,Vue3性能优化
提示词内容：
你现在是一位全栈开发工程师，正在带领团队开发一个企业级后台管理系统。请为我创建一个完整的 Vue3 + TypeScript 项目实战教程。
教程需要包含以下完整内容：
第一阶段：项目架构设计
详细说明项目的整体架构，包括：
- 目录结构规划（每个文件夹的用途和规范）
- 技术栈选择理由（Vue3、TypeScript、Vite、Element Plus 等）
- 开发规范制定（代码风格、命名规范、注释规范）
- 环境配置（ESLint、Prettier、Husky 等工具链）
第二阶段：核心功能模块实现
逐个讲解以下核心模块的开发：
1. 登录认证模块
- JWT Token 的完整实现流程
- 登录状态管理（Pinia）
- 路由守卫的实现
- Token 刷新机制
- 提供完整的代码实现
2. 权限管理系统
- 基于角色的权限控制（RBAC）
- 动态路由生成
- 按钮级权限指令
- 权限组件封装
- 权限测试用例
3. 数据表格组件
- 通用表格组件封装
- 分页、排序、筛选功能
- 列配置化
- 大数据量渲染优化（虚拟滚动）
- 表格导出功能
4. 表单系统
- 动态表单生成
- 表单验证规则封装
- 表单联动处理
- 表单数据回显
- 复杂表单场景（嵌套表单、动态增减项）
第三阶段：性能优化与工程化
讲解项目的优化策略：
- 路由懒加载
- 组件异步加载
- 图片懒加载
- 打包体积优化
- 首屏加载优化
- 缓存策略
第四阶段：部署与运维
- 多环境配置（开发、测试、生产）
- CI/CD 流程搭建
- Docker 容器化部署
- 日志收集与监控
- 错误追踪方案
每个模块都要提供：
- 需求分析
- 技术方案
- 完整代码
- 测试方法
- 常见问题解答
请用实战导向的语言，多用"在实际开发中"、"这里有个坑需要注意"、"最佳实践是"等经验性表达。代码要符合企业级开发规范，包含完整的类型定义和注释。