基于vue的前端架構——Mint UI（更适用于移動端）

一、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架構。