第一步:安装mint-ui(这里不细说)
第二步;运行npm install babel-plugin-component (文档写的npm install babel-plugin-component -D,)(我按文档知道装了报错,项目无法编译,可能是和版本有关系???多次尝试后把-D删掉就可以)
第三部: 修改.babelrc 文件,一般安装在项目根目录下
(我按文档说的修改的内容走报错无法运行,后来发现只需要在.babelrc文件里面的plugin加上以下内容即可)
["component", [ { "libraryName": "mint-ui", "style": true } ] ]
我的最终结果如下:
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [
"istanbul" ,
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
]
}
}
}
第四部:修改main.js文件
首先,引入使用的组件(以下是我用到的)
//按需引入
import { Button, TabContainer, TabContainerItem, Loadmore , } from 'mint-ui'
然后,声明使用组件(文档说可以写成Vue.use(xxxx),我这么写报错,具体原因未知,建议用下面的写法)
//按需引入
Vue.component(Button.name, Button);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
Vue.component(Loadmore.name, Loadmore);
第五步:npm run build 运行无报错,成功
附全局引入:(这里多了个CSS文件的引入,按需引入的话这行也要注释掉)
// 全局引入
// import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'
// 全局引入
// Vue.use(MintUI)