@elora-cloud/elora-unplugin-vue-components

unplugin-vue-components解析器@elora-cloud/elora-plus的实现。

扩展了 element-plus的内置解析器ElementPlusResolver,因为@elora-cloud/elora-plus对 element-plus一些组件的样式进行了修改，所以在按需加载时除了需要加载element-plus的组件内的样式同时也需要加载@elora-cloud/elora-plus组件内修改的样式

github地址

gitee地址

开始

pnpm add -D @elora-cloud/elora-unplugin-vue-components

自动导入组件和样式文件，最终的结果为：

import { ElCheckbox } from "element-plus/es";
import "element-plus/es/components/base/style/css";
import "element-plus/es/components/checkbox/style/css";
import "@elora-cloud/elora-plus/theme/styles/checkbox.css";

配置

如果没有添加unplugin-vue-components、unplugin-auto-import，需要先添加的依赖

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

配置vite插件vite.config.ts

import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; 去掉默认的ElementPlusResolver
// 引入自定义的解析器
import { EloraPlusResolver, ElementPlusResolver } from '@elora-cloud/elora-unplugin-vue-components';
{
    ...
    plugins:[
        ...
        Components({
            resolvers: [
              ElementPlusResolver(), 
              EloraPlusResolver()
            ]
          }),
          AutoImport({
            resolvers: [
              ElementPlusResolver(),
              EloraPlusResolver(),
            ]
          }),
    ]
}