vite-plugin-vue-import

按需加载vue3组件

安装

• npm i -D vite-plugin-vue-import
• yarn add -D vite-plugin-vue-import
• pnpm add -D vite-plugin-vue-import

使用

• 默认加载double-ui-vue/es/[componentName]/style.css

// vite.config.js
import { defineConfig } from 'vite';
import viteComponentsImport from 'vite-plugin-vue-import';

export default defineConfig({
    // ...
    plugins: [
        VitePluginVueImport([
            {
                libName: 'double-ui-vue'
            }
        ])
    ]
    // ...
});

• 不加载单个组件css

// vite.config.js
import { defineConfig } from 'vite';
import VitePluginVueImport from 'vite-plugin-vue-import';

export default defineConfig({
    // ...
    plugins: [
        VitePluginVueImport([
            {
                libName: 'double-ui-vue',
                style: false
            }
        ])
    ]
    // ...
});

• 加载less，style返回double-ui-vue/es/[componentName]/style.less

// vite.config.js
import { defineConfig } from 'vite';
import VitePluginVueImport from 'vite-plugin-vue-import';

export default defineConfig({
    // ...
    plugins: [
        VitePluginVueImport([
            {
                libName: 'double-ui-vue',
                style: 'less'
            }
        ])
    ]
    // ...
});

• 自定义加载css

// vite.config.js
import { defineConfig } from 'vite';
import VitePluginVueImport from 'vite-plugin-vue-import';

export default defineConfig({
    // ...
    plugins: [
        VitePluginVueImport([
            {
                libName: 'double-ui-vue',
                style: (name) => `double-ui-vue/es/${name}/style.css`
            }
        ])
    ]
    // ...
});

• 加载base.css， 默认值double-ui-vue/es/base.css

// vite.config.js
import { defineConfig } from 'vite';
import VitePluginVueImport from 'vite-plugin-vue-import';

export default defineConfig({
    // ...
    plugins: [
        VitePluginVueImport([
            {
                libName: 'double-ui-vue',
                base: `double-ui-vue/es/base.css`
            }
        ])
    ]
    // ...
});

options参数

| 参数 | 说明 | 类型 | 默认值 | 必须 | |--------------|------------|---------------------------------------------|-------|-------| | libName | 库名 | string | 'es' | true | | style | 加载css方式 | true/false/'css'/'less'/'sass'/(name) => {} | 'css' | false | | base | 加载base.css | boolean/string | false | false | false | | libDir | 组件文件夹 | string | 'es' | false | | camel2Dash | 驼峰转横线 | boolean | true | false |