快速开始

安装

pnpm add @rd-element/ui element-plus @lucide/vue vue@^3.5.0
# 使用图表组件时另需：
pnpm add echarts vue-echarts

Peer 依赖（需由业务项目安装）：

包	版本	说明
vue	^3.5.0	必需
element-plus	^2.8.0	必需
@lucide/vue	^1.0.0	必需
echarts / vue-echarts	^6 / ^8	可选；仅用 @rd-element/ui/chart 时需要

组件库将 element-plus 声明为 peer，构建时不打包，与业务项目共用同一份依赖，避免双实例冲突。app.use(RodelUi) 不会拉取图表；图表从 @rd-element/ui/chart 引入。

全量引入

import { createApp } from 'vue'
import 'element-plus/dist/index.css' // ① 先 EP 基础样式
import '@rd-element/ui/dist/style.css' // ② 再库覆盖层（含 tokens → --el-*）
import RodelUi from '@rd-element/ui'
// 需要图表时：
// import RodelUiCharts from '@rd-element/ui/chart'
import App from './App.vue'

const app = createApp(App)
app.use(RodelUi)
// app.use(RodelUiCharts)
app.mount('#app')

注意：import '@rd-element/ui' 也会带入样式；务必保证 EP CSS 写在库 JS/CSS 之前。

设计变量说明见 设计令牌。

库的 install 不会 app.use(ElementPlus)，仅注册主包 Rd* 组件（不含依赖 echarts 的图表）。

按需引入（推荐）

业务直接使用的 El* 与库的 Rd* 分别走两个 Resolver：

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { RodelUiResolver } from '@rd-element/ui/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        ElementPlusResolver({ importStyle: false }), // 已全量引 EP css 时关掉按需样式注入
        RodelUiResolver(), // Rd*；图表组件会解析到 @rd-element/ui/chart
      ],
    }),
  ],
})

也可手动按入口拆分：

import { RdDialog, RdStatCard, RdChartCard } from '@rd-element/ui'
import { RdChartLine } from '@rd-element/ui/chart'

<script setup lang="ts">
import { Star } from '@lucide/vue'
</script>

<template>
  <el-button type="primary">
    <template #icon><Star class="size-4" /></template>
    按钮
  </el-button>
</template>

按需组件可用 Resolver；若已全量引入 element-plus/dist/index.css，请设 ElementPlusResolver({ importStyle: false })，避免按需样式后注入盖掉库 tokens。

样式说明

样式	引入方	说明
element-plus/dist/index.css（或按需）	业务项目	EP 基础样式，全局一次
@rd-element/ui/dist/style.css	业务项目	全局覆盖 .el-button 等 + Toast（须后引入）

当前按钮主题为方案 A：库样式会改写业务内所有 Element Plus 按钮（不提供 RdButton 封装）。

主题变量

可通过 CSS 变量覆盖主题色（在 .rd-* 组件内映射到对应 --el-*）：

:root {
  --rd-color-primary: #ea543f;
  --rd-color-primary-hover: #d94432;
  --rd-color-primary-active: #c73b2b;
}

本地开发

pnpm install
pnpm dev
pnpm docs:dev
pnpm build