介绍

框架提供一系列的组件方便快速开发。

基础组件

基础组件由 Element Plus 提供，其中包含按钮、文字链接、单选框、多选框、输入框、计数器、级联选择器、开关、滑块等 50+ 个组件。

阅读并学习请查看 Element Plus 官方文档。

说明

为了统一图标的使用，框架没有采用 Element Plus 官方图标的使用方式，这意味着部分 Element Plus 组件的 icon 属性将无法使用，例如 Button 按钮组件。

<!-- 无法使用 -->
<ElButton icon="el-icon-edit">编辑</ElButton>

<!-- 可以使用插槽代替 -->
<ElButton>
  <template #icon>
    <ElIcon>
      <FaIcon name="i-ep:edit" />
    </ElIcon>
  </template>
  编辑
</ElButton>

如果你习惯 Element Plus 官方图标的使用方式，需执行 pnpm install @element-plus/icons-vue 安装依赖，并按照官方的使用方式引入图标，点击查看详细介绍。

替换组件库

如果你不喜欢 Element Plus ，或者你想要将老项目迁移到 Fantastic-admin 上，但老项目里使用的组件库并不是 Element Plus ，框架也提供了组件库替换移方案：

• 《替换为 Ant Design Vue》
• 《替换为 Arco Design Vue》
• 《替换为 Naive UI》
• 《替换为 TDesign》
• 《替换为 Vexip UI》
• 《替换为 iDux》

如果你想使用的组件库不在上述方案中，可以通过参考任何一份方案，理解替换的整理思路，并自行替换，别担心会很复杂，我们已经将大部分工作做好了。

内建组件

为满足 UI 组件库可替换的特性，框架提供了一批内建组件。这些组件的设计仅满足于框架自身需求，如果在业务中使用并且无法满足业务需求，建议使用更为专业的 UI 组件库。

内建组件存放在 /src/ui/components/ 目录下，并配置了使用时自动引入。

扩展组件

扩展组件也就是开发者自定义的组件，存放在 /src/components/ 目录下，我们也建议开发者将自定义组件存放在该目录下，方便后续框架迁移升级。

框架提供了几个基于 Element Plus 组件上二次封装的组件。