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

Posted 2020-12-10 程序媛小仙女

在做项目的过程中遇到了公司组件库没有的组件，这个时候需要按需引入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"  //用来标识是不一样的，如果不添加 会报错

        ]

    ]


}