一、什么是 Mint UI
當(dāng)我們一聽到 XX UI 就可以知道它是一個(gè)界面相關(guān)的框架，玩過前端的人至少聽說過 Bootstrap「它是 Twitter 開源的一個(gè) css/html 工具包」, 而 Mint UI 是餓了么團(tuán)隊(duì)開源的一款基于 Vue.js 的移動(dòng)端組件庫
二、Mint UI 的使用方法
1、使用 cdn 的方式引入
我們在使用 Vue.js 的時(shí)候不一定非要使用 vue-cli 來創(chuàng)建一個(gè)單頁面應(yīng)用，很可能們使用別的技術(shù)棧來搭配 Vue.js「vue只是使用它的模版，減少惡心的動(dòng)態(tài)拼串」，那么我們使用 cdn 直接引入的方式是最好不過了
引入方法
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>
當(dāng)然我們也可以使用 yarn/npm/bower 等來安裝 Mint UI 模塊，然后在 html 界面中引入
這種方式其實(shí)沒有什么好說的，就像我們在以前的 vue demo 中引入 vue.js 是一樣的，廢話不多說了，來兩個(gè)例子直觀感受一下吧
使用幾個(gè)組件練練手
仿手機(jī) webapp 淘寶登錄界面
來張效果圖看一下
手淘 webapp 登錄界面
手淘的登錄界面
使用 Mint UI 仿寫的手淘 webapp 登錄界面
仿寫手淘的登錄界面
怎么樣還原度還是挺高的吧，當(dāng)然這個(gè)效果不使用 Mint UI 完全可以實(shí)現(xiàn)「實(shí)現(xiàn)難度也是非常低的，這里使用 Mint UI 實(shí)現(xiàn)此效果有點(diǎn)大材小用，只是為了演示效果」
核心代碼
<div id="mydiv">
<!-- 提醒欄 -->
<div class="tipslogin">
<span>你需要登錄才能繼續(xù)仿問</span>
<span class="closeSpan">關(guān)閉</span>
</div>
<div class="imgDiv">
<img src="./imgs/tblogo.png" alt=" " class="logo">
</div>
<!-- 操作區(qū)域 -->
<div class="operateDiv">
<!-- 賬號(hào) -->
<mt-field :placeholder="accountPlaceholder" v-model="uname" class="myinput">
</mt-field>
<!-- 密碼 -->
<mt-fieldv-show="isUserAccount" placeholder="請(qǐng)輸入密碼" type="password" v-model="upass" class="myinput">
</mt-field>
<!-- 短信驗(yàn)證碼 -->
<mt-fieldv-show="!isUserAccount" placeholder="校驗(yàn)碼" v-model="getCode" class="myinput">
<span class="getCode">獲取短信驗(yàn)證碼</span>
</mt-field>
<!-- 免費(fèi)注冊塊 -->
<div class="registerDiv">
<span>免費(fèi)注冊</span>
<span v-show="forgetPassShowroNot">忘記密碼</span>
</div>
<!-- 登錄和切換登錄方式塊 -->
<div>
<mt-button size="large" class="mybutton" @click.native="login">登錄</mt-button>
<mt-button size="large" type="primary" class="mybutton" @click.native="changeLoginMethod">{{defaultAccountText}}</mt-button>
</div>
</div>
</div>
這個(gè)沒有什么好說的，完整的代碼請(qǐng)看https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/usecdntaobaologin注釋非常清楚，不解釋
2、在 Vue-cli 中使用 Mint UI
我們使用 vue-cli 來創(chuàng)建的組件化項(xiàng)目，其實(shí)也有三種引入 Mint UI 的方式
（1）、直接在 index.html 中引入，這個(gè)和上面的方式一樣，不過有一些小區(qū)別，我們來感受一下
我們使用 vue-cli 來創(chuàng)建一個(gè)項(xiàng)目，過程就不演示了，以前說過，我們直接看核心代碼
1、在 index.html 中使用 cdn 引入 mint-ui 相關(guān)的 css 和 js
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mint-ui-demo</title>
<link rel="stylesheet" >
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
<!-- built files will be auto injected -->
<scrip tsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
<div id="app"></div>
</body>
</html>
方式一，配置 externals mint-ui
2、配置 webpack.base.conf.js，添加如下代碼
配置 mint-ui
我們在 webpack.base.conf.js 的 module.exports 中配置 externals，externals 是把組件公開出去，供全局使用
PS：在這里我們要注意一點(diǎn) externals 配置的 key:vaule 形式的，這里的 Value 好多文章中說是隨意配置的，但是親過自己親測，這里不能隨便配置，必須要和相關(guān) js 暴漏出來的模塊名字一模一樣，對(duì)于 mint-ui 來說是 MINT，我們可以看一下 mint-ui.js 的源碼
mint-ui部分源碼
看到了吧，mint-ui 暴露出去供我們使用的是 MINT，所以 externals 的 value 一定是這個(gè)值「不能隨意配置」
3、修改 main.js
import MINT from'mint-ui'
Vue.use(MINT)
添加以上兩句，引入 mint-ui ，并且使用它
經(jīng)過以上三部，我們就使用 cdn 的方式把 mint-ui 配置完了，我們來測試一下
4、在 App.vue 中的模版中添加以下代碼
<template>
<div id="app">
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
<router-view/>
</div>
</template>
5、運(yùn)行查看結(jié)果
show-vue-cli-cdn-mint-ui
怎么樣，完美的顯示出了 mint-ui 的 Button 效果
方式二 配置 externals vue
除了以上方式，我們還可以在 externals 中直接配置 vue 不用配置 mint-ui ，
關(guān)于 externals 可以看 webpack 官方說明：外部擴(kuò)展，這里不細(xì)說了解一下即可，我們來看看如何在配置---配置方式如下
externals-config-vue
我們這時(shí)配置一下 Vue 并不配置 mint-ui
同時(shí)去掉 main.js 中的 import 和 Vue.use(MINT)
remove-use-mint
由于我們修改了 webpack.base.conf.js 所以一定要重新啟動(dòng)服務(wù)，果看結(jié)果
show-vue-cli-cdn-mint-ui.png
怎么樣，效果一毛一樣，為什么呢？個(gè)人是這樣理解的，mint-ui 是依賴于 vue 的，如果我們沒有在 externals 配置 vue，只是配置了 mint-ui「這里 import MINT from 'mint-ui' 都是 cdn 上的全局都一樣」 沒有把 vue 當(dāng)全局暴露出去，那么我們在每個(gè)界面 import Vue from 'vue' 其實(shí)是 vue-cli 把我們下載到 node-modules 中的 vue ,而在本地 vue 使用其它 組件的時(shí)候，一般情況下我們是要 import 和 Vue.use(xxx) 的「具體要看組件的 js 有沒有提供這個(gè)方法」
但是如果我們在 externals 中配置了 vue ，相當(dāng)于我們 import Vue from 'vue' 都是 cdn 上的「和本地 node-modules 中的 vue 沒有關(guān)系，此時(shí)的 vue 和 mint 真正的都是 cdn 上的」，此時(shí)的情況就像在 html 中直使用 cdn 直接引入 vue 再引入 mint-ui 是一樣的，所以我們不必在 externals 再去配置 mint-ui，效果也能實(shí)現(xiàn)「個(gè)人建議如果使用的話，使用第二種方案」
（2）、使用模塊化全局引用
以上說了在 vue-cli 中使用 cdn 來使用 mint-ui 的兩種方式，其實(shí)使用 cdn 來減小包的大小和優(yōu)化速度是不錯(cuò)的一種選擇，下在我們介紹第二種使用模塊化全局引入 mint-ui
1、首先我們要使用一模塊我們就要安裝它「cdn 除外」,使用 yarn/npm 來安裝，這里使用 yarn「好處以前在 React 中說過了，這里不過多了說」
yarn-add-mint-ui
在這里我們要注意一下，樣式文件需要單獨(dú)引入
2、使用 mint-ui
我們打開 main.js 輸入以下內(nèi)容「如圖中紅框所示」
import-mint-js-and-css
經(jīng)過以上兩步配置，我們就把 mint-ui 全局配置好了，我們在任何組件中就可以使用 mint-ui 了
3、測試一下
我們就來幾個(gè)按鈕和 Navbar 的功能，廢話不多說了直接看效果圖
golbal-vue-cli
基本上就是這個(gè)效果，具體代碼可以看源碼https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-vue-cli-global-use-demo
（3）、使用模塊化按需引用
在上面的例子，我們只使用了 button 和 Navbar 組件，但是我們卻引入了整個(gè) mint-ui 組件，這有多么大的浪費(fèi)呀「簡直是一種奢侈，大材小用」，能不能我們需要什么組件再引入什么組件，實(shí)現(xiàn)按需加載呢「以達(dá)到減少項(xiàng)目體積的目的」，當(dāng)然可以了，我們來看看這種方式
1、使用 vue-cli 來創(chuàng)建一個(gè)名為 mint-ui-cli-single-import-demo 的項(xiàng)目
當(dāng)然我們要使用 mint-ui ，我們肯定要安裝 mint-ui
yarn add mint-ui
2、要實(shí)現(xiàn)按需加載 mint-ui 組件，我們需要借助 babel-plugin-component 組件來只引入需要組件，我們來安裝一下 babel-plugin-component
yarn add install babel-plugin-component --dev
3、配置 .babelrc
config-single-mint-ui-babelrc.png
我們來運(yùn)行一下項(xiàng)目 yarn run dev 然后輸入 localhost:8080 很不幸，報(bào)錯(cuò)了，我們看一下命令行中的錯(cuò)誤如下，是我們要使用 ES6 的標(biāo)準(zhǔn)，卻沒有安裝 babel-preset-es2015 ，廢話不多說，我們安裝一下即可
can't-find-es2015
4、安裝 babel-preset-es2015
yarnadd babel-preset-es2015 --dev
我們完成安裝以后，再運(yùn)行一下，就不會(huì)報(bào)上面的錯(cuò)誤了
5、我們來引入按鈕來測試一下，我們在 main.js 引入 Button 組件
import-button-and-use
這樣我們引入了 Button 并且全局注冊了 Button 我們就可以在什何組件中使用 Button 了，官方說注冊組件可以使用 Vue.component(Component.name, Component) 和 Vue.use(Component) 兩種方式實(shí)現(xiàn)，但是親測只有 Vue.component(Component.name, Component) 這種注冊方式起作用而 Vue.use(Component) 是無效的「會(huì)報(bào)錯(cuò)，說組件沒有正確的注冊」
6、使用 Button 組件，我們直接在 App.vue 組件中使用 Button
button-in-appvue
7、運(yùn)行一把，查看結(jié)果
show-single-button-result
怎么樣除了我們熟悉的 vue-cli 幫我們創(chuàng)建的 HelloWorld 以外，我們看到了 mint-ui 創(chuàng)建的兩個(gè)按鈕「完美顯示出來了」
PS:?這里注意一下，我們?nèi)绻胍o mt-button 這種自定義組件添加點(diǎn)擊事件，不能使用傳統(tǒng)的 @click 而要使用 @click.native
這樣我們就把按需加載 mint-ui 中的組件配置完了，不過根據(jù)路由的思想，雖然我們可以把路由配置在 main.js 中，但是為了統(tǒng)一管理 vue-cli 幫我們把路由配置在單獨(dú)的文件中--- router/index.js 中，仿照路由的配置，我們把 mint-ui 也單獨(dú)配置在一個(gè)文件夾中「方便我們管理,當(dāng)然這不是必須的，你完全可以在 main.js 中去一個(gè)個(gè)按需引入組件」，這里我們創(chuàng)建一個(gè) mint-ui/index.js 文件「如下所示」
add-mint-ui-indexjs
我們把引入需要的 mint-ui 組件全部配置在 mint-ui/index.js 文件中
8、配置 mint-ui/index.js 文件
由于 mint-ui 是基于 vue 的，所以我們要先相入 vue ，這和 router 是一樣的「這里以 Button 為例子來引入，其實(shí)就是把上面 main.js 是配置的放到 mint-ui/index.js 文件中」
# mint-ui/index.jsimportVuefrom'vue'import{ Button }from'mint-ui';Vue.component(Button.name, Button);
9、修改 main.js
由于我們把 main.js 中引入 Button 的工作放在了 mint-ui/index.js 中了，所以我們現(xiàn)在把原有的 main.js 中引入 Button 的方法就要去掉「替換成引入 mint-ui/index.js 即可」
# main.jsimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'//import{ Button }from'mint-ui';// Vue.component(Button.name, Button);import'./mint-ui/index.js'...
10、查看結(jié)果
show-single-button-result
和上面在 main.js 中引入 Button 組件是一毛一樣的，所以推薦大家在使用 mint-ui 的時(shí)候建議在一個(gè)單獨(dú)文件中去引入
11、我們再來幾個(gè)組件試試
為了方便起見，我們把原來 App.Vue 中和 HelloWorld 組件中的內(nèi)容干掉「template、style、js 都把內(nèi)容清空」
我們在 HelloWorld 組件中分別引入 mint-ui 的 Button、Action sheet 等「需要什么我們看文檔即可，文檔非常的詳細(xì)」
直接在 mint-ui/index.js 引入需要的組件即可
# mint-ui/index.js
import Vue from'vue'
import { Button,Actionsheet } from 'mint-ui';
Vue.component(Button.name, Button);
Vue.component(Actionsheet.name, Actionsheet);
我們可以看到除了 Button，我們又引入了 Actionsheet「依次類推，想用什么組件就在這里引入并且注冊即可」，我們來看看 Actionsheet 的用法
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
actions 屬性綁定一個(gè)由對(duì)象組成的數(shù)組，每個(gè)對(duì)象有 name 和 method 兩個(gè)鍵，name 為菜單項(xiàng)的文本，method 為點(diǎn)擊該菜單項(xiàng)的回調(diào)函數(shù)。sheetVisible 是組件默認(rèn)是否顯示，直接看代碼「在 HelloWorld 中添加」
<template>
<div class="hello">
<mt-button type="primary" size="large">primary</mt-button>
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
</div>
</template>
<script>
export default{
? ? ? name:'HelloWorld',?
? ? ? ?data () {
? ? ? ? ? ? ? ?return{actions:[],// 設(shè)置為 true 默認(rèn)就自動(dòng)彈出
? ? ? ? ? ? ? ?actionSheetsheetVisible:true
}
? },?
created() {
? ? ? ? ? ? this.actions = [? ?
? ? ? ? ? ? ? ? ? ? ? ? ?{name:'拍照'},?
? ? ? ? ? ? ? ? ? ? ? ? ? ?{name:'打開相冊'}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]?
? ? ? ? ? ? ? ? ? ? }
}
沒有什么好說的，和官方介紹的差不離，在這里 actions 中的 method 不是必須「但是實(shí)際情況是肯定是有的，不然 actionsheet 有個(gè)毛意義呢」
12、運(yùn)行一下，查看結(jié)果
use-actionsheet-demo
13、我們來實(shí)現(xiàn)，點(diǎn)擊按鈕顯示 actionsheet 并且每個(gè) actionsheet 中的菜單有對(duì)應(yīng)的方法
add-method-to-actionsheet
我們再給 Button 添加點(diǎn)擊事件
<mt-button type="primary" size="large" @click.native="showActionSheet">primary</mt-button>
14、運(yùn)行一把看結(jié)果
show-actionsheet-result
還不錯(cuò)吧，這里基本就差不多了，其它的組件我們照著文檔使用就可以了，沒什么難的「文檔非常的詳細(xì)」
具體代碼看：源代碼
三、使用 mint-ui 仿微信界面
以上說我們說了 mint-ui 的三種引入方式，并且介紹了組件的使用，這沒有什么好說的，需要什么組件看官網(wǎng)上有的話直接拿來用。學(xué)了就要使用，在這里我們使用 mint-ui 來仿一個(gè)微信的基本框架「使用 vue-cli + 按需加載 mint-ui 組件的方式」，所謂無圖無真相，我們來看一下效果圖吧
效果圖
we-chat-demo.gif
大概說一下我是如何拆分組件的，具體可以看源碼，注釋非常清楚
wecaht-component-01
其它類似發(fā)現(xiàn)，我的中的條目都是通用的組件「就不一一列舉了」，這個(gè) Demo 中的組件抽到的粒度還不是最細(xì)的，大家可以自行再封裝組件
四、總結(jié)
本節(jié)我們說了 mint-ui 的使用，其實(shí)不管什么組件都是類似的使用方式，還是非常 easy 的，大概總結(jié)一下
1、在 vue-cli 中使用 mint-ui 有三種方式
使用 cdn 引入，注意配置 webpack.base.conf.js
全局使用，包會(huì)非常大，效率當(dāng)然不是很高
按需使用--推薦使用「建議我們把使用三方組件單獨(dú)配置到一個(gè)文件中，這里注意官方說單個(gè)組件可以使用 Vue.use(xxx)，親測不可以「看了源碼，確實(shí)沒有實(shí)現(xiàn) install 方法」，我們只能使用 Vue.component(Component.name,Component) 這種方式」
2、使用 mint-ui 仿微信
使用了組件化開發(fā)，父子組件之間的傳數(shù)據(jù)，方法等
使用到了 mint-ui 的 tabs 組件，index-list 等組件
