vue项目中引入mint-ui的方式（全部引入与按需引入）

一、全部引入
1、安装mint-ui

npm intall mint-ui  --save

2、main.js中引入mint-ui

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)

3、组件调用

<mt-button type="danger">退出登录</mt-button>

button组件在页面正常显示了，说明我们成功了。

 

二、按需引入
1、除了安装mint-ui之外还需要安装 babel-plugin-component

npm intall mint-ui  --save

npm install --save-dev babel-plugin-component

2、修改.babelrc文件

"plugins": [["component", [   

   {     

       "libraryName": "mint-ui",  

       "style": true  

     } 

  ]]]

 

 

如果plugins属性后有值，则如上所示直接在后面加。

3、组件引入

在main.js中引入项目需要的组件

本例子中引入 button组件用于实践效果

import {Button} from 'mint-ui'

Vue.component(Button.name,Button)

4、在页面中使用

<mt-button type="danger">退出登录</mt-button>

button组件在页面正常显示了，说明我们成功了。