大型项目架构分层设计专题

应按功能领域(domain)划分目录,而非按技术类型划分

共享组件应放在src/components/common目录下,按业务领域划分的组件放在各自领域目录

所有Vuex/Vuex模块都应放在单个store.js文件中便于管理

应采用按功能模块(feature-based)的组织方式,每个模块包含自己的views、components、api、store

每个API请求都应单独处理try-catch,不应使用全局拦截器

应在axios拦截器中统一处理token刷新、错误提示和请求重试逻辑

错误监控只需在main.js中注册Vue.config.errorHandler即可

API层应直接返回axios的response对象,由组件层自行处理数据格式化

在router.beforeEach中获取用户权限,动态调用router.addRoutes添加路由

所有路由在初始化时全部注册,通过v-if在组件层面控制显示

应将路由配置与权限配置分离,路由meta中定义requiredRoles字段

动态添加路由后,需要使用router.replace({ path: to.path })触发重新导航

使用() => import('./views/Home.vue')可以实现路由组件的懒加载

路由懒加载会将每个路由组件打包成独立的chunk文件

所有路由都应使用懒加载,包括登录页和首页

可以通过webpackChunkName注释自定义chunk文件名

对

错

使用CDN外部化引入Vue、VueRouter等大型依赖库

启用gzip或brotli压缩静态资源

配置webpack的splitChunks策略,提取公共代码为独立chunk

将所有图片资源转换为base64编码内联到JS文件中

单元测试应测试组件的完整渲染效果,包括CSS样式

E2E测试应覆盖所有组件的props和事件

单元测试使用Vue Test Utils挂载组件,验证组件内部逻辑和状态变化

E2E测试速度更快,应优先编写E2E测试

组件在不同props组合下的渲染结果

组件在不同浏览器环境下的CSS兼容性

组件事件触发的时机和参数传递

组件的边界情况和异常处理(如空数据、非法props)

所有API请求都写在单个api.js文件中

按业务模块拆分API文件(如user.js、order.js),统一在index.js中导出

每个组件内直接编写axios请求,不创建单独的API文件

API层应由后端提供Swagger自动生成,前端不需要维护API文件

使用v-for时始终绑定唯一的key属性

将大列表拆分为多个小列表组件,每个组件独立响应式数据

使用Object.freeze()冻结列表数据,避免Vue进行响应式转换

采用虚拟列表(virtual scroll)方案,只渲染可视区域的列表项

使用CSS自定义属性(CSS变量),通过JavaScript切换HTML根元素的class或data-theme属性

为每种主题编写独立的CSS文件,切换时动态加载对应CSS文件

使用CSS-in-JS方案(如styled-components),在JS中动态生成主题样式

使用Sass/Less变量,在编译时生成多套CSS,运行时通过class切换

使用Vue DevTools的Performance面板分析组件渲染耗时和更新频率

通过performance API测量FCP(First Contentful Paint)和LCP(Largest Contentful Paint)

在单元测试中断言组件的渲染性能,确保渲染时间不超过阈值

使用Lighthouse进行性能审计,检查包体积、首屏加载时间等