@wetspace/pro-components

面向中后台场景的 Vue 3 + Element Plus 高级组件库，API 设计参考 Ant Design ProComponents。

特性

• 基于 Element Plus 二次封装，开箱即用的重型业务组件
• 拥抱 Vue 3 组合式 API，核心逻辑提供可复用 hooks
• 与 ProTable / ProForm 共用 columns、valueType 配置
• 支持全量注册与 unplugin-vue-components 按需引入

安装

pnpm add @wetspace/pro-components element-plus lodash-es
# 或
npm install @wetspace/pro-components element-plus lodash-es
# 或
yarn add @wetspace/pro-components element-plus lodash-es

Peer Dependencies： vue ^3.5.0、element-plus ^2.5.0、lodash-es ^4.17.21

快速开始

全量注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { WetProComponents } from '@wetspace/pro-components'

const app = createApp(App)
app.use(ElementPlus)
app.use(WetProComponents)
app.mount('#app')

可选 prefix 为全局组件名添加前缀：

app.use(WetProComponents, { prefix: 'Wet' })
// ProTable → WetProTable

按需引入

<script setup lang="ts">
import { ProTable, ProForm, ProLayout } from '@wetspace/pro-components'
</script>

也可从子包单独引入，例如 @wetspace/pro-table、@wetspace/pro-form。

自动按需（unplugin-vue-components）

import Components from 'unplugin-vue-components/vite'
import { WetProComponentsResolver } from '@wetspace/pro-components/resolver'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [WetProComponentsResolver()],
    }),
  ],
})

组件一览

| 分类 | 组件 | | --- | --- | | 布局 | ProLayout、PageContainer、ProCard、StatisticCard、CheckCard | | 数据录入 | ProForm、StepsForm、ModalForm、DrawerForm、LoginForm、LoginFormPage | | 数据展示 | ProTable、EditableProTable、DragSortTable、ProList、ProDescriptions | | 通用 | ProConfigProvider、ProField、ProSkeleton、ProEditor、ProCharts |

文档

完整 API、示例与最佳实践请访问官方文档：

https://www.wetspace.top/docs/wet-pro-element/

子包

本包为统一入口（umbrella package），内部聚合以下子包：

| 包名 | 说明 | | --- | --- | | @wetspace/pro-layout | 高级布局 | | @wetspace/pro-form | 高级表单 | | @wetspace/pro-table | 高级表格 | | @wetspace/pro-descriptions | 描述列表 | | @wetspace/pro-list | 高级列表 | | @wetspace/pro-card | 高级卡片 | | @wetspace/pro-field | 字段原子组件 | | @wetspace/pro-skeleton | 骨架屏 | | @wetspace/pro-provider | 全局配置 | | @wetspace/pro-editor | 富文本编辑器 | | @wetspace/pro-charts | 图表 | | @wetspace/pro-utils | 工具函数 |

许可证

MIT