一、什么是 Mint UI
當(dāng)我們一聽(tīng)到 XX UI 就可以知道它是一個(gè)界面相關(guān)的框架，玩過(guò)前端的人至少聽(tīng)說(shuō)過(guò) Bootstrap「它是 Twitter 開(kāi)源的一個(gè) css/html 工具包」, 而 Mint UI 是餓了么團(tuán)隊(duì)開(kāi)源的一款基于 Vue.js 的移動(dòng)端組件庫(kù)
二、Mint UI 的使用方法
1、使用 cdn 的方式引入
我們?cè)谑褂?Vue.js 的時(shí)候不一定非要使用 vue-cli 來(lái)創(chuàng)建一個(gè)單頁(yè)面應(yīng)用，很可能們使用別的技術(shù)棧來(lái)搭配 Vue.js「vue只是使用它的模版，減少惡心的動(dòng)態(tài)拼串」桑孩，那么我們使用 cdn 直接引入的方式是最好不過(guò)了
引入方法
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>
當(dāng)然我們也可以使用 yarn/npm/bower 等來(lái)安裝 Mint UI 模塊，然后在 html 界面中引入
這種方式其實(shí)沒(méi)有什么好說(shuō)的框冀，就像我們?cè)谝郧暗?vue demo 中引入 vue.js 是一樣的流椒，廢話不多說(shuō)了，來(lái)兩個(gè)例子直觀感受一下吧
使用幾個(gè)組件練練手
仿手機(jī) webapp 淘寶登錄界面
來(lái)張效果圖看一下
手淘 webapp 登錄界面
手淘的登錄界面
使用 Mint UI 仿寫(xiě)的手淘 webapp 登錄界面
仿寫(xiě)手淘的登錄界面
怎么樣還原度還是挺高的吧明也，當(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ù)仿問(wèn)</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)注冊(cè)塊 -->
<div class="registerDiv">
<span>免費(fèi)注冊(cè)</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è)沒(méi)有什么好說(shuō)的温数，完整的代碼請(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 來(lái)創(chuàng)建的組件化項(xiàng)目撑刺，其實(shí)也有三種引入 Mint UI 的方式
（1）鹉胖、直接在 index.html 中引入，這個(gè)和上面的方式一樣够傍，不過(guò)有一些小區(qū)別甫菠，我們來(lái)感受一下
我們使用 vue-cli 來(lái)創(chuàng)建一個(gè)項(xiàng)目，過(guò)程就不演示了冕屯，以前說(shuō)過(guò)淑蔚，我們直接看核心代碼
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
我們?cè)?webpack.base.conf.js 的 module.exports 中配置 externals搞挣，externals 是把組件公開(kāi)出去，供全局使用
PS：在這里我們要注意一點(diǎn) externals 配置的 key:vaule 形式的音羞，這里的 Value 好多文章中說(shuō)是隨意配置的囱桨，但是親過(guò)自己親測(cè)，這里不能隨便配置嗅绰，必須要和相關(guān) js 暴漏出來(lái)的模塊名字一模一樣舍肠，對(duì)于 mint-ui 來(lái)說(shuō)是 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)過(guò)以上三部点骑，我們就使用 cdn 的方式把 mint-ui 配置完了，我們來(lái)測(cè)試一下
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 官方說(shuō)明：外部擴(kuò)展，這里不細(xì)說(shuō)了解一下即可珠漂，我們來(lái)看看如何在配置---配置方式如下
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 的济舆，如果我們沒(méi)有在 externals 配置 vue卿泽，只是配置了 mint-ui「這里 import MINT from 'mint-ui' 都是 cdn 上的全局都一樣」 沒(méi)有把 vue 當(dāng)全局暴露出去，那么我們?cè)诿總€(gè)界面 import Vue from 'vue' 其實(shí)是 vue-cli 把我們下載到 node-modules 中的 vue ,而在本地 vue 使用其它 組件的時(shí)候滋觉，一般情況下我們是要 import 和 Vue.use(xxx) 的「具體要看組件的 js 有沒(méi)有提供這個(gè)方法」
但是如果我們?cè)?externals 中配置了 vue 签夭，相當(dāng)于我們 import Vue from 'vue' 都是 cdn 上的「和本地 node-modules 中的 vue 沒(méi)有關(guān)系，此時(shí)的 vue 和 mint 真正的都是 cdn 上的」椎侠，此時(shí)的情況就像在 html 中直使用 cdn 直接引入 vue 再引入 mint-ui 是一樣的第租，所以我們不必在 externals 再去配置 mint-ui，效果也能實(shí)現(xiàn)「?jìng)€(gè)人建議如果使用的話我纪，使用第二種方案」
（2）慎宾、使用模塊化全局引用
以上說(shuō)了在 vue-cli 中使用 cdn 來(lái)使用 mint-ui 的兩種方式，其實(shí)使用 cdn 來(lái)減小包的大小和優(yōu)化速度是不錯(cuò)的一種選擇浅悉，下在我們介紹第二種使用模塊化全局引入 mint-ui
1趟据、首先我們要使用一模塊我們就要安裝它「cdn 除外」,使用 yarn/npm 來(lái)安裝，這里使用 yarn「好處以前在 React 中說(shuō)過(guò)了术健，這里不過(guò)多了說(shuō)」
yarn-add-mint-ui
在這里我們要注意一下汹碱，樣式文件需要單獨(dú)引入
2、使用 mint-ui
我們打開(kāi) main.js 輸入以下內(nèi)容「如圖中紅框所示」
import-mint-js-and-css
經(jīng)過(guò)以上兩步配置荞估，我們就把 mint-ui 全局配置好了咳促，我們?cè)谌魏谓M件中就可以使用 mint-ui 了
3稚新、測(cè)試一下
我們就來(lái)幾個(gè)按鈕和 Navbar 的功能，廢話不多說(shuō)了直接看效果圖
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)呀「簡(jiǎn)直是一種奢侈，大材小用」噪裕，能不能我們需要什么組件再引入什么組件蹲盘，實(shí)現(xiàn)按需加載呢「以達(dá)到減少項(xiàng)目體積的目的」，當(dāng)然可以了膳音，我們來(lái)看看這種方式
1召衔、使用 vue-cli 來(lái)創(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 組件來(lái)只引入需要組件，我們來(lái)安裝一下 babel-plugin-component
yarn add install babel-plugin-component --dev
3兵志、配置 .babelrc
config-single-mint-ui-babelrc.png
我們來(lái)運(yùn)行一下項(xiàng)目 yarn run dev 然后輸入 localhost:8080 很不幸醇蝴，報(bào)錯(cuò)了，我們看一下命令行中的錯(cuò)誤如下想罕，是我們要使用 ES6 的標(biāo)準(zhǔn)悠栓，卻沒(méi)有安裝 babel-preset-es2015 ，廢話不多說(shuō)按价，我們安裝一下即可
can't-find-es2015
4惭适、安裝 babel-preset-es2015
yarnadd babel-preset-es2015 --dev
我們完成安裝以后，再運(yùn)行一下楼镐，就不會(huì)報(bào)上面的錯(cuò)誤了
5癞志、我們來(lái)引入按鈕來(lái)測(cè)試一下，我們?cè)?main.js 引入 Button 組件
import-button-and-use
這樣我們引入了 Button 并且全局注冊(cè)了 Button 我們就可以在什何組件中使用 Button 了框产，官方說(shuō)注冊(cè)組件可以使用 Vue.component(Component.name, Component) 和 Vue.use(Component) 兩種方式實(shí)現(xiàn)凄杯，但是親測(cè)只有 Vue.component(Component.name, Component) 這種注冊(cè)方式起作用而 Vue.use(Component) 是無(wú)效的「會(huì)報(bào)錯(cuò)，說(shuō)組件沒(méi)有正確的注冊(cè)」
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è)按鈕「完美顯示出來(lái)了」
PS:?這里注意一下窿锉，我們?nèi)绻胍o mt-button 這種自定義組件添加點(diǎn)擊事件酌摇，不能使用傳統(tǒng)的 @click 而要使用 @click.native
這樣我們就把按需加載 mint-ui 中的組件配置完了膝舅，不過(guò)根據(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 為例子來(lái)引入，其實(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奔坟、我們?cè)賮?lái)幾個(gè)組件試試
為了方便起見(jiàn)，我們把原來(lái) App.Vue 中和 HelloWorld 組件中的內(nèi)容干掉「template搭盾、style咳秉、js 都把內(nèi)容清空」
我們?cè)?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「依次類推，想用什么組件就在這里引入并且注冊(cè)即可」滋迈，我們來(lái)看看 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:'打開(kāi)相冊(cè)'}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]?
? ? ? ? ? ? ? ? ? ? }
}
沒(méi)有什么好說(shuō)的碍彭，和官方介紹的差不離晤硕，在這里 actions 中的 method 不是必須「但是實(shí)際情況是肯定是有的，不然 actionsheet 有個(gè)毛意義呢」
12庇忌、運(yùn)行一下舞箍，查看結(jié)果
use-actionsheet-demo
13、我們來(lái)實(shí)現(xiàn)皆疹，點(diǎn)擊按鈕顯示 actionsheet 并且每個(gè) actionsheet 中的菜單有對(duì)應(yīng)的方法
add-method-to-actionsheet
我們?cè)俳o Button 添加點(diǎn)擊事件
<mt-button type="primary" size="large" @click.native="showActionSheet">primary</mt-button>
14疏橄、運(yùn)行一把看結(jié)果
show-actionsheet-result
還不錯(cuò)吧，這里基本就差不多了，其它的組件我們照著文檔使用就可以了捎迫，沒(méi)什么難的「文檔非常的詳細(xì)」
具體代碼看：源代碼
三晃酒、使用 mint-ui 仿微信界面
以上說(shuō)我們說(shuō)了 mint-ui 的三種引入方式，并且介紹了組件的使用窄绒，這沒(méi)有什么好說(shuō)的贝次，需要什么組件看官網(wǎng)上有的話直接拿來(lái)用。學(xué)了就要使用彰导，在這里我們使用 mint-ui 來(lái)仿一個(gè)微信的基本框架「使用 vue-cli + 按需加載 mint-ui 組件的方式」蛔翅，所謂無(wú)圖無(wú)真相，我們來(lái)看一下效果圖吧
效果圖
we-chat-demo.gif
大概說(shuō)一下我是如何拆分組件的位谋，具體可以看源碼山析，注釋非常清楚
wecaht-component-01
其它類似發(fā)現(xiàn)，我的中的條目都是通用的組件「就不一一列舉了」倔幼，這個(gè) Demo 中的組件抽到的粒度還不是最細(xì)的盖腿，大家可以自行再封裝組件
四、總結(jié)
本節(jié)我們說(shuō)了 mint-ui 的使用损同，其實(shí)不管什么組件都是類似的使用方式翩腐，還是非常 easy 的，大概總結(jié)一下
1膏燃、在 vue-cli 中使用 mint-ui 有三種方式
使用 cdn 引入茂卦，注意配置 webpack.base.conf.js
全局使用，包會(huì)非常大组哩，效率當(dāng)然不是很高
按需使用--推薦使用「建議我們把使用三方組件單獨(dú)配置到一個(gè)文件中等龙，這里注意官方說(shuō)單個(gè)組件可以使用 Vue.use(xxx)，親測(cè)不可以「看了源碼伶贰，確實(shí)沒(méi)有實(shí)現(xiàn) install 方法」蛛砰，我們只能使用 Vue.component(Component.name,Component) 這種方式」
2、使用 mint-ui 仿微信
使用了組件化開(kāi)發(fā)黍衙，父子組件之間的傳數(shù)據(jù)泥畅，方法等
使用到了 mint-ui 的 tabs 組件，index-list 等組件
