我们安装vue组件库的时候,考虑到大小问题,需要根据需要仅引入部分组件
借助?babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
但是在配置 ?.babelrc 文件的时候,可能会有同时引入两个ui组件库该如何实现的疑惑
module.exports = {
presets: [
'@vue/app',
['es2015', { 'modules': false }]
],
'plugins': [
[
'component',
{
'libraryName': 'mint-ui',
'style': true
}
]
]
}
module.exports = {
presets: [
'@vue/app',
['es2015', { 'modules': false }]
],
'plugins': [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
}
首先修改 .babelrc 文件
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
["component",
[{
"libraryName": "mint-ui",
"style": true
},
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]
]
]
}
安装 babel-preset-es2015
$ npm install babel-preset-es2015 -D
在安装一个
npm install babel-plugin-import -S
然后修改
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime",
["component", {
"libraryName": "mint-ui",
"style":true
}],
["import",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
main.js 文件
import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import {Button } from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
Vue.use(Element)
new Vue({
el: '#app',
render: h => h(App)
})
在vue项目中同时使用element-ui和mint-ui,的时候,.babelrc配置文件怎么写
原文:https://www.cnblogs.com/amcy/p/10352301.html