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