vue 项目按需引入多个ui组件库

在做项目的过程中遇到了公司组件库没有的组件,这个时候需要按需引入elementUI ,同时公司的组件库也是按需引入的,减少项目的体积。
话不多说直接上代码:

首先:我们需要借助  babel-plugin-component,npm install babel-plugin-component -D

其次:我们找到我们的 bable.congig.js 来配置

plugins: [
[‘some-plugin‘, {}],
[‘some-plugin‘, {}, ‘some unique name‘],

 这个是插件安装的格式,需要再加入一个值在对象中,我们需要来标识这是不一样的东西

module.exports = {

presets: [        ‘@vue/cli-plugin-babel/preset‘    ],    plugins: [        [            "component",            // 1.全局引入            // {            //   "libraryName": "公司自己的组件库",            //   "camel2Dash": false,            //   "libDir": "dist",            //   "style": false            // }            // 2.按需引入            {                "libraryName": "meri-design",                "camel2Dash": false,                "libDir": "dist",                "styleLibrary": {"name": "theme", "base": true}            },        ], [            "component",            {                "libraryName": "element-ui",                "styleLibraryName": "theme-chalk",            },       "el"  //用来标识是不一样的,如果不添加 会报错        ]    ]}

相关推荐