介绍
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
链接
文档 文档也是基于组件库开发的