vite-plugin-vue-import v0.0.8

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参数