一、mintUI簡介

       mint是一個基於vue的前端UI框架，而它的樣式比較類似於手機的樣式，可以說是一個基於vue打包app的UI框架，使用mint框架可以給使用vue打包的app的使用者更好的互動體驗。mint已支援vue2.0。

二、安裝和引入mintUI    

        在安裝之前首先要對vue.js有所瞭解，有一個建立好的vue的專案以及安裝好的node.js。

        執行命令npm i mint-ui -S，出現以下介面代表安裝成功。

引入muitUI：

在main.js中加入

import MintUI from 'mint-ui'

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

Vue.use(MintUI)

注意：樣式需要單獨引入。這樣引入可以引入全部的元件

如果不想引入全部元件，只想按需引入，則需要安裝

npm install babel-plugin-component -D

修改.babeirc為：

然後import需要的元件就可以了

三、使用示例

1、提示資訊toast

html:

'

js:

在頁面中的效果：

2、訊息提示框

html:

js:

頁面效果：

更多的示例和具體使用方法請看mintUI官方文件：http://mint-ui.github.io/#!/zh-cn

        通過以上的兩個示例可以看到，使用mintUI的使用者互動介面要友好很多，在基於vue開發app的時候可以考慮使用這個前端UI框架。