首先安装:
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) })