@deppon/unplugin-deppon-ui

自动导入 @deppon/deppon-ui 和 @deppon/deppon-template 组件样式的 Vite 插件。

功能

• ✅ 自动识别模板中的 el-* 标签，导入对应的 Element Plus CSS
• ✅ 自动识别模板中的 pro-* 标签，导入对应的 deppon-template Less 文件
• ✅ 自动识别从 @deppon/deppon-ui 导入的组件，导入对应的 Element Plus CSS
• ✅ 自动识别从 @deppon/deppon-template 导入的组件，导入对应的 Less 文件
• ✅ 支持按需导入，只导入实际使用的组件样式

安装

npm install -D @deppon/unplugin-deppon-ui

使用

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import DepponUI from '@deppon/unplugin-deppon-ui/vite';

export default defineConfig({
    plugins: [
        vue(),
        DepponUI({
            // 选项（可选）
            importElementPlusStyles: true, // 默认 true
            importDepponTemplateStyles: true, // 默认 true
            elementPlusStyleFormat: 'css', // 'css' | 'sass'，默认 'css'
            depponTemplatePath: '@deppon/deppon-template', // 默认 '@deppon/deppon-template'
        }),
    ],
});

选项

importElementPlusStyles

• 类型: boolean
• 默认值: true
• 说明: 是否自动导入 Element Plus 样式（针对 el-* 标签和 @deppon/deppon-ui 组件）

importDepponTemplateStyles

• 类型: boolean
• 默认值: true
• 说明: 是否自动导入 deppon-template 样式（针对 pro-* 标签）

elementPlusStyleFormat

• 类型: 'css' | 'sass'
• 默认值: 'css'
• 说明: Element Plus 样式格式

depponTemplatePath

• 类型: string
• 默认值: '@deppon/deppon-template'
• 说明: deppon-template 包的路径

示例

使用 el-* 标签

<template>
    <el-button>按钮</el-button>
    <el-input v-model="value" />
</template>

<script setup>
// 无需手动导入样式，插件会自动导入
const value = ref('');
</script>

使用 pro-* 标签

<template>
    <pro-table :columns="columns" :data="data" />
    <pro-form :columns="formColumns" />
</template>

<script setup>
// 无需手动导入样式，插件会自动导入
const columns = ref([]);
const data = ref([]);
</script>

从包中导入组件

<template>
    <ElButton>按钮</ElButton>
</template>

<script setup>
import { ElButton } from '@deppon/deppon-ui';
// 无需手动导入样式，插件会自动导入
</script>

支持的组件

Element Plus 组件（el-*）

所有 Element Plus 组件都支持，包括：

• Button, Input, Form, Table, Dialog 等基础组件
• 完整列表请参考 Element Plus 官方文档

deppon-template 组件（pro-*）

• ProTable - 表格组件
• ProTableColumn - 表格列组件
• ProForm - 表单组件
• ProDialog - 对话框组件
• ProLayout - 布局组件
• ProField - 字段组件
• ProFieldText - 文本字段
• ProFieldSelect - 选择字段
• ProFieldDatePicker - 日期选择字段

License

MIT