基于element-plus适用于后台开发的组件库

924 阅读2分钟

介绍

element-pro-components 是一个基于 element-plus, vue, vue-router 的一个适用于中后台快速开发的一套组件库

起因

之前我根据业务需求维护一套后台模版,同时存在多个项目 clone 这个模版项目。但随着时间的推移模版项目的变动同步到各个项目变得麻烦,于是就开始制作这个组件库

优势

  • 通过更新依赖版本及可同步组件变动,方便使用
  • 不需要花时间精简模版中未使用的依赖
  • 支持按需引入组件及样式
  • api 风格贴近 element-plus
  • 基于 TypeScript 开发,完善的类型推断
  • 与业务完全脱离,避免不同业务的组件混用产生错误
  • 提供完善的代码提示

组件

布局相关

  • Layout 基础的布局组件,能够自动从 vue-router 获取路由信息生成菜单
  • Menu 自动从 vue-router 获取路由信息生成菜单,已包含在 Layout 组件中
  • Breadcrumb 根据当前页面路由信息自动生成面包屑
  • Tabs 记录浏览的历史页面自动生成 tabs
  • Link 方便处理内部和外部跳转

表单相关

  • Form 根据 columns 配置信息动态生成表单,具体使用请查看文档
  • Radio 根据 data 信息生成单选组,方便在 Form 中使用单选
  • RadioButton 同 Radio
  • Checkbox 根据 data 信息生成多选组,方便在 Form 中使用多选
  • CheckboxButton 同 Checkbox
  • Select 根据 data 信息生成选择器,方便在 Form 中使用选择器
  • TreeSelect 树形结构选择器
  • InputTag 多标签输入框
  • AutocompleteTag 同 InputTag,额外提供输入建议

表格相关

  • Table 根据 columns 配置信息动态生成表格,具体使用请查看文档
  • Crud 基于 Form 和 Table 用于快速构建增删改查页面
  • ColumnSetting 配合 Table 或 Crud 使用,动态控制表格中某一项的显示与隐藏

其它

  • Descriptions 根据 columns 配置信息动态列表形式的展示字段,具体使用请查看文档

国际化

同 elememt-plus 一样可以通过 ElConfigProvider 注入国际化配置,暂未提供配置文件

自定义主题

TODO: 等待 elememt-plus 深色主题推出后会相关进行同步更新。目前可以直接通过 css-variables 修改

路由格式

由于布局相关的组件需要从 vue-router 中获取路由信息,我们规范了路由格式详细可以查看 路由和菜单

贡献

组件库还处于开发阶段,部分功能还需要完善。如果你希望参与贡献,欢迎 Pull Request。如果只是简单的文档相关的错误修正,你可以直接 PR。但如果是 BUG、新功能、新组件等,最好优先提 issues

git 提交信息风格参考 vue commit-convention

链接

文档 文档也是基于组件库开发的

源码