表格工具核心职责协同方式Vue Router页面跳转、路由传参、权限控制1. 动态路由传参给组件（如 orderId）；2. 路由参数传递筛选条件；3. 守卫控制页面访问权限Pinia全局数据存储、异步请求封装1. 组件从 Pinia 读取数据；2. Action 封装请求逻辑；3. 权限判断依赖 Pinia 的用户状态缓存组件激活时刷新数据1. 返回列表页时触发刷新；2. 刷新逻辑同步路由参数和

custom使用场景纯 JS 项目：用 VueTypes 做运行时 props 校验；TS 项目：用 VueTypes 补充运行时校验（TS 仅编译时），尤其复杂对象 / 自定义规则；团队协作：统一 props 校验规范，降低沟通成本。最佳写法简单 props：用 TS 原生注解（如复杂 props：用结合 TS 接口，兼顾静态 + 运行时校验；全局复用：封装通用类型（如 CustomerType

适用场景需多语言支持的跨境 CRM、多语言团队协作场景；纯中文 CRM 无需引入 Vue I18n，完全没必要；核心配置按模块拆分语言包（common/customer/order），便于维护；语言切换后保存到本地存储，刷新不丢失；性能优化大型 CRM 按需加载语言包，缓存翻译结果；自定义缺失翻译兜底，避免页面显示空白；集成第三方组件同步 Element Plus 等第三方组件的多语言，保证体验一

监听进度条状态变化，执行自定义逻辑：typescript运行// 监听进度条开始console.log('进度条启动');// 禁用页面滚动（可选）});// 监听进度条结束console.log('进度条结束');// 恢复页面滚动});封装统一工具：将 NProgress 封装为全局工具函数，统一配置和样式，避免重复代码；场景适配路由跳转：全局路由拦截，延迟结束进度条；接口请求：Axios 拦

封装统一工具：所有本地存储通过封装的操作，统一处理加密、过期、命名空间；场景化存储策略永久数据（用户偏好）：localStorage + 无过期；临时数据（筛选条件 / 表单）：sessionStorage + 短期过期；敏感数据（Token / 手机号）：加密存储 + 合理过期；字典数据：批量缓存 + 1 天过期（减少接口请求）；容错与降级：处理浏览器禁用存储、大数据存储异常等场景，避免页面崩溃

变量 / 解构 / 模板字符串：简化基础数据操作，是日常开发的 “语法糖”；箭头函数 / 扩展运算符：大幅减少代码量，Vue 组件 / 数据处理高频用；class / 模块化：工程化开发的核心，封装通用逻辑、拆分代码模块；Promise：异步编程基础，是 async/await（ES2017）的前置；实战原则：优先用 const/let、箭头函数简化回调、模块化拆分代码、class 封装通用逻辑。