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
libDir	组件文件夹	string	'es'	false
camel2Dash	驼峰转横线	boolean	true	false