我们安装vue组件库的时候，考虑到大小问题，需要根据需要仅引入部分组件

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

但是在配置 .babelrc 文件的时候，可能会有同时引入两个ui组件库该如何实现的疑惑

配置 .babelrc 文件

单独配置mint-ui的时候

module.exports = {presets: ['@vue/app', ['es2015', { 'modules': false }]],'plugins': [['component',{'libraryName': 'mint-ui','style': true}]]
}

单独配置element-ui的时候

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)
})

转载于:https://www.cnblogs.com/amcy/p/10352301.html

在vue项目中同时使用element-ui和mint-ui,的时候，.babelrc配置文件怎么写相关推荐

在vue项目中引入element，并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
vue项目中使用element的dialog中引入ztree却不能初始化解决办法
一开始我在里边写的,发现获取不到,那么采用dialog自带的回调函数,窗口打开后opend进行处理, 结果: 转载于:https://www.cnblogs.com/sweeeper/p/11511 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
vue项目中的回车登录
vue项目中的回车登录:(搭配element ui 的使用如果是原生,@keyup.enter="login(form)"就可以了) 在密码框上加代码:v-model=" ...
Vue项目中最简单的使用集成UEditor方式，含图片上传
Vue 3 项目参考这里前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热 ...
Vue项目中最简单的使用集成百度UEditor方式，含图片上传
前言封面是UEditor的百度指数折线图.虽然今天已经是 2018 年,且优秀的富文本编辑器层出不穷(包括移动端),但从图中可以看出UEditor仍然维持着较高的搜索热度.而不少公司和个人也仍然 ...

在vue项目中同时使用element-ui和mint-ui,的时候，.babelrc配置文件怎么写

配置 .babelrc 文件

单独配置mint-ui的时候

单独配置element-ui的时候

两个同时使用的时候

第一种方法

第二种方法

配置好之后引用

在vue项目中同时使用element-ui和mint-ui,的时候，.babelrc配置文件怎么写相关推荐

最新文章

热门文章