Installation

安装 @eams-monorepo/vue-element-cui

安装

依赖

pnpm add @eams-monorepo/vue-element-cui element-plus

如果你要接入 unplugin-vue-components 和 unplugin-auto-import，再补上：

pnpm add -D unplugin-vue-components unplugin-auto-import

样式接入

在入口样式文件中引入组件库样式：

import "@eams-monorepo/vue-element-cui/styles";

如果你使用 VueElementCuiResolver() 做组件自动注册，resolver 会自动补上 @eams-monorepo/vue-element-cui/styles 作为副作用导入，通常不需要再手动重复引入组件库样式。

注册方式

如果没有做全局注册，可以在页面或业务组件中手动按需引入；如果希望模板里的 Cui* 组件自动注册，可以直接接入 unplugin-vue-components。

unplugin-vue-components

在 vite.config.ts 中使用组件库提供的 resolver：

import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
import { VueElementCuiResolver } from "@eams-monorepo/vue-element-cui/resolver";

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

这样模板里的 CuiTable、CuiForm、CuiDialog 等组件会自动按需导入。

unplugin-auto-import

如果你希望脚本里的运行时 API 和类型一起自动导入，推荐使用组件库提供的 imports 配置（vueElementCuiImports 与 vueElementCuiTypeImports）：

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import {
    vueElementCuiImports,
    vueElementCuiTypeImports,
} from "@eams-monorepo/vue-element-cui/resolver";

export default defineConfig({
    plugins: [
        AutoImport({
            imports: [vueElementCuiImports, ...vueElementCuiTypeImports],
        }),
    ],
});

这会覆盖组件库当前公开导出的运行时内容，例如 VueElementCui、install、version 和所有 Cui* 组件名，同时也会补齐类型导入声明。

如果你更偏好 resolvers 形式，也可以使用：

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import {
    VueElementCuiAutoImportResolver,
    vueElementCuiTypeImports,
} from "@eams-monorepo/vue-element-cui/resolver";

export default defineConfig({
    plugins: [
        AutoImport({
            resolvers: [VueElementCuiAutoImportResolver()],
            imports: [...vueElementCuiTypeImports],
        }),
    ],
});

VueElementCuiAutoImportResolver() 主要覆盖运行时导出；如果你还希望类型也一并生成，继续配合 vueElementCuiTypeImports 使用即可。

Volar 类型提示

如果使用项目通过 app.use(VueElementCui) 做全局注册，并希望在模板里直接获得 Cui* 组件的类型提示，请在使用项目的 tsconfig.json 中补充：

{
    "compilerOptions": {
        "types": ["@eams-monorepo/vue-element-cui/global"]
    }
}

这样 vue-tsc 和 Volar 都能识别组件库提供的全局组件声明。

如果你使用 unplugin-vue-components 自动生成 components.d.ts，通常不需要再额外引入 @eams-monorepo/vue-element-cui/global。

本页目录

依赖
样式接入
注册方式
unplugin-vue-components
unplugin-auto-import
Volar 类型提示

GitHub 提交 Issue