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組件在頁面正常顯示了，說明我們成功了。