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" //用来标识是不一样的,如果不添加 会报错

]

]


}
posted @ 2020-06-12 11:46  程序媛小仙女  阅读(3567)  评论(1编辑  收藏  举报