为什么要搭建公共组件库？

公共组件是什么？

看 ChatGPT 给出的定义：

前端公共组件是指在前端开发过程中，经常会被多个页面或多个项目复用的组件。

这些组件通常具有一定的独立性和通用性，可以被封装成独立的模块，供多个页面或项目共享使用。

前端公共组件可以包括但不限于按钮、表单、导航栏、轮播图、模态框、消息提示等常见的UI组件，也可以包括一些业务逻辑相关的组件，如登录组件、购物车组件等。

组件基础

组件注册

• 组件注册有两种方式
  • 全局注册：使用 Vue.component( id, [definition] )
  • 局部注册

---

背景

在后台管理系统中，存在大量重复相似的页面：

例如：

在列表页面中，通常列表包含以下部分：

• 数据统计项

• 高级搜索

• 列表：列表中包含表头、固定列、操作下拉、分页器

然而在 elements 组件中，组件的粒度划分更加小，通常像这种列表组件，包含的 elements 组件有：

• <el-statistic> 统计数值 组件
• 高级搜索框：
  • 实际为 <el-form > 表单组件，通常包含常见的 Form 表单组件：下拉、搜索、远程搜索、单选/多选、switch 开关、上传、按钮等
• 表格组件中，包含以下 element 组件：
  • <el-table> 表格组件；
  • <el-pagination> 分页组件：实现对列表内容页面动态切换；
  • <el-dropdown-menu> 下拉菜单组件： 实现对列表操作的统一管理；
  • <el-dialog> 弹窗组件： 弹窗显示不同操作的内容表单；
  • <el-form > 表单组件：通常包含常见的 Form 表单组件：下拉、搜索、远程搜索、单选/多选、switch 开关、上传、按钮等`，用于提交不同操作内容。

组件设计

关于 Vue2 组件基础知识总结，可以参考我的博客文章 Vue2.x 组件，文章中包含以下关于组件的知识总结：

• 组件基础
• 组件注册原理
• 组件声明周期原理
• 组件分类
• 组件通信方式总结
• 扩展组件方式总结
• 高阶组件
• 常见内置组件原理