@wetspace/pro-components

@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()],
    }),
  ],
})

组件一览

文档

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

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

子包

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

许可证

MIT