最佳实践

相关源文件

• README.es.md
• README.ja.md
• README.md
• README.zh-CN.md
• src/components/HeaderSearch/index.vue
• src/components/Share/DropdownMenu.vue
• src/components/TextHoverEffect/Mallki.vue
• src/components/Tinymce/components/EditorImage.vue
• src/icons/svg/search.svg
• src/layout/components/TagsView/ScrollPane.vue
• src/utils/permission.js
• src/views/components-demo/mixin.vue
• src/views/dashboard/admin/components/BoxCard.vue
• src/views/dashboard/admin/components/TodoList/index.scss
• src/views/documentation/index.vue
• src/views/example/components/ArticleDetail.vue
• src/views/example/create.vue
• src/views/permission/directive.vue

本文档提供了关于如何有效使用 vue-element-admin 框架的推荐实践和模式。遵循这些指南将有助于您在应用程序中保持一致性、性能和可伸缩性。有关项目架构的通用信息，请参阅 核心架构，有关项目结构详情，请参阅 项目结构。

1. 组件组织

1.1 组件组合

在构建复杂组件时，请遵循代码库中使用的组合模式，以提高可维护性和可重用性。

示例：ArticleDetail 组件通过组合多个小型组件来遵循此模式

- ArticleDetail
  |- Sticky
  |- DropdownComponents
  |- MDinput
  |- Tinymce
  |- Upload

来源： src/views/example/components/ArticleDetail.vue1-76 src/views/example/create.vue1-14

1.2 智能组件与展示型组件

将业务逻辑与展示分离

• 智能组件：负责数据获取、状态管理和业务逻辑
• 展示型组件：专注于使用 props 和 events 进行 UI 渲染

来源： src/views/example/components/ArticleDetail.vue78-249 src/components/Tinymce/components/EditorImage.vue1-112

2. 状态管理

2.1 Vuex Store 用法

在多个组件需要访问的状态使用 Vuex，特别是

• 认证状态
• 用户信息
• 应用程序设置
• 共享数据集合

何时使用局部组件状态:

• 组件特定的 UI 状态
• 仅对单个组件有效的表单数据
• 不需要持久化的临时数据

来源： src/views/dashboard/admin/components/BoxCard.vue29-62 src/utils/permission.js1-22

2.2 状态访问模式

在组件中优先使用 Vuex 辅助函数来访问 store 状态

来源： src/views/dashboard/admin/components/BoxCard.vue29-62

3. 路由与导航

3.1 路由组织

遵循路由管理的既定模式

来源： src/utils/permission.js1-22

3.2 路由导航最佳实践

• 使用命名路由进行导航
• 使用路由 meta 字段存储额外数据
• 保持路由路径与您的文件夹结构一致
• 使用嵌套路由处理父子关联视图

对于路由过渡和缓存视图，妥善使用 TagsView 组件

来源： src/views/example/components/ArticleDetail.vue198-202 src/layout/components/TagsView/ScrollPane.vue1-95

4. 表单处理

4.1 表单验证

使用 Element UI 的内置验证和自定义验证器实现表单验证

来源： src/views/example/components/ArticleDetail.vue113-148

4.2 表单提交模式

处理表单提交时，应包含清晰的加载状态和错误处理

来源： src/views/example/components/ArticleDetail.vue207-225

5. 权限管理

5.1 权限控制方法

基于权限进行访问控制的两种主要方法

1. 指令式：使用 v-permission 指令控制 UI 元素
2. 函数式：使用 checkPermission() 函数处理动态元素

何时使用哪种方法:

方法	用例	示例
v-permission	静态 UI 元素	按钮、菜单项
checkPermission	动态组件、v-if 条件	Tabs、动态表格

来源： src/utils/permission.js1-22 src/views/permission/directive.vue1-112

5.2 权限实现示例

来源： src/views/permission/directive.vue6-13 src/views/permission/directive.vue58-63

6. API 集成

6.1 API 请求模式

遵循结构化的 API 请求方法

来源： src/views/example/components/ArticleDetail.vue181-197

6.2 Mock 数据最佳实践

使用内置 mock 系统时

• 保持 mock 数据结构与您的真实 API 一致
• 使用 mock 响应测试错误处理
• 记录 mock API 端点供团队参考
• 考虑在特定环境中禁用 mock

来源： src/views/example/components/ArticleDetail.vue181-197

7. UI 组件使用

7.1 Element UI 最佳实践

• 保持组件库使用的一致性
• 利用现有的样式系统
• 为常用的 Element UI 组件创建包装器组件，增加自定义行为

来源： src/views/example/components/ArticleDetail.vue1-76 src/components/Share/DropdownMenu.vue1-104

7.2 自定义组件扩展

扩展或创建自定义组件时

• 保持 props 模式的一致性
• 用清晰的 props 定义来文档化组件用法
• 使用 slots 进行灵活的内容注入
• 发出标准化的事件

来源： src/components/Share/DropdownMenu.vue15-26 src/components/Tinymce/components/EditorImage.vue37-42

8. 性能优化

8.1 组件优化

通过以下技术改进组件性能

技术	实现	优点
计算属性	用于派生值	减少重复计算
延迟加载	用于路由和组件	减少初始加载时间
局部变量	在简单情况下，使用局部变量代替过多的计算属性	提高可读性
键赋值	在 v-for 循环中提供唯一的 key	优化列表渲染

来源： src/views/example/components/ArticleDetail.vue152-168 src/components/HeaderSearch/index.vue1-181

8.2 搜索和过滤优化

优化数据过滤和搜索操作

来源： src/components/HeaderSearch/index.vue80-137

9. 响应式设计

9.1 响应式布局模式

使用以下技术实现响应式设计

响应式样式示例

来源： src/views/dashboard/admin/components/BoxCard.vue112-116

9.2 移动优先的方法

• 从移动端设计开始，然后扩展到桌面端
• 使用 Element UI 的响应式类
• 在开发过程中测试多种设备尺寸

来源： src/views/dashboard/admin/components/TodoList/index.scss303-319

10. 代码风格和约定

10.1 Vue 组件结构

在 Vue 组件中遵循一致的排序

1. 组件名称
2. 组件
3. Props
4. 数据
5. 计算属性
6. Watch
7. Created/mounted 生命周期钩子
8. 方法
9. Render functions

来源： src/views/example/components/ArticleDetail.vue103-249 src/components/HeaderSearch/index.vue26-139

10.2 文件组织

• 将相关组件分组到文件夹中
• 使用 index.vue 作为目录中的主组件
• 为包含多个部分的复杂组件创建组件子文件夹
• 将实用函数保留在单独的文件中

来源： src/views/example/components/ArticleDetail.vue1-290 src/components/Tinymce/components/EditorImage.vue1-112

11. 常见陷阱

1. 紧耦合：避免在不相关的部分直接引用特定的组件或 Vuex 模块
2. 深层组件嵌套：限制组件层级深度以提高性能
3. 直接 DOM 操作：使用 Vue 的响应式系统，而不是直接操作 DOM
4. 大型组件文件：将大型组件拆分成更小、更集中的组件
5. 命名不一致：在整个项目中遵循既定的命名约定

来源： src/views/example/components/ArticleDetail.vue175-178 src/components/HeaderSearch/index.vue97-130

12. 测试策略

12.1 组件测试

测试组件时，关注以下方面

测试类型	测试内容	示例
单元测试	组件 Props、事件、方法	测试表单验证
快照测试	组件渲染输出	测试 UI 组件
集成测试	组件交互	测试表单提交流程
端到端测试 (E2E Tests)	完整的用户流程	测试登录、导航

12.2 模拟依赖

• 为组件测试模拟 API 调用
• 为具有 Store 依赖的组件测试模拟 Vuex Store
• 为使用导航的组件模拟 Router

来源： src/views/example/components/ArticleDetail.vue181-197

总结

遵循这些最佳实践将有助于您在处理 vue-element-admin 时维护一个干净、高性能且易于维护的应用程序。这些指南来源于代码库中的模式观察，并遵循 Vue.js 的最佳实践。有关具体的实现细节，请参阅源代码中的示例。

有关特定系统的更多信息，请参阅 核心架构 或 组件库 文档。