vue同时使用element-ui和mint-ui,.babelrc怎么写
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
首先安装:
cnpm i element-ui -S //安装element-ui
cnpm i mint-ui -S //安装mint-ui
为了减小项目体积,为了引入插件或者组件时会自动引入相应的 CSS 文件,咱们按需引入,所以借助: babel-plugin-component
肯定得安装:
cnpm i babel-plugin-component -D
然后修改.babelrc:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
["component",
[{
"libraryName": "mint-ui",
"style": true
},
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]
]
]
}
当然这样写还不够,会报错,所以我们还需安装:
cnpm install babel-preset-es2015 --save-dev
还有第二种方法,在网上看的:
再需安装一个: npm install babel-plugin-import --save-dev
然后再修改:
{
"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"
}
]
]
}
这个我没试,大家可以试一试,我只是在这里先记录一下。
配置好后,举个例子:
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)
})
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)