- 官網(wǎng)：https://mint-ui.github.io/#!/zh-cn
- Github: https://github.com/ElemeFE/mint-ui/
今天具體說一說比較常用的；Mint UI框架的按鈕組件，Mint UI是 餓了么團隊開發(fā)基于vue .js的移動端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要
1：安裝node
端開發(fā)框架和環(huán)境都是需要 Node.js ，先安裝node.js開發(fā)環(huán)境，vue的運行是要依賴于node的npm的管理工具來實現(xiàn)，下載https://nodejs.org/en/，安裝完成之后，打開cmd開始輸入命令。（我用的是win10系統(tǒng)，所以需要管理員權(quán)限，右鍵點擊以管理員身份運行cmd），不然會出現(xiàn)很多報錯。
2：查看node的版本號
下載好node之后，以管理員身份打開cmd管理工具，，輸入 node -v ，回車，查看node版本號，出現(xiàn)版本號則說明安裝成功。
輸入命令： node -v
3：安裝淘寶npm鏡像
由于npm是國外的，使用起來比較慢，我們這里使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具可以代替默認的npm管理工具。
輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4：安裝全局vue-cli腳手架
淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架，輸入命令：cnpm install --global vue-cli 回車；驗證是否安裝成功，在命令輸入vue，出來vue的信息，及說明安裝成功；
輸入命令：cnpm install --global vue-cli
5：開始進入主題，初始化一個vue項目
我這里是在d盤里面新建一個項目，先用d:的命令，回車鍵進入d盤；回車鍵默認創(chuàng)建項目信息。
vue init webpack mint
出現(xiàn)這樣的提示，初始化成功
打開d盤，可以看到剛才初始化的項目
運行初始化demo，輸入命令npm run dev；運行一下初始后的demo，彈出訪問地址，如果沒有問題則進行安裝Mint UI；準備好好之后，開始引入餓了么Mint UI組件。
cd mint
npm run dev
6：安裝 Mint UI
npm install mint-ui -S
快捷鍵ctrl+c,終止批處理操 作嗎(Y/N)，從上一步退出來，再輸入命令npm install mint-ui -S
成功安裝組件顯示如下
7：然后在項目中的main.js文件引入所有組件
// 引入全部組件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
8：在App.vue中寫代碼
<template>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
</div>
</template>
<script>
export default{
el: '#app',
methods: {
handleClick: function() {
this.$toast('Hello world!');
}
}
}
</script>
<style>
</style>
9：再次運行，組件中的效果如下：
輸入命令：
npm run dev
在瀏覽器里面，我們可以看到
http://localhost:8080/#/
demo內(nèi)容顯示如下：
Mint UI教程匯總：
Vue移動端框架Mint UI教程-搭建環(huán)境引入框架（一）
http://www.itdecent.cn/p/874e5152b3c5
Vue移動端框架Mint UI教程-底部導航欄（二）
http://www.itdecent.cn/p/56e887cbb660
Vue移動端框架Mint UI教程-組件的使用（三）
http://www.itdecent.cn/p/5ec1e2d2f652
Vue移動端框架Mint UI教程-跳轉(zhuǎn)新頁面(四)
http://www.itdecent.cn/p/364d0462ddb6
Vue移動端框架Mint UI教程-調(diào)用模擬json數(shù)據(jù)(五)
http://www.itdecent.cn/p/6d3f1436b327
Vue移動端框架Mint UI教程-數(shù)據(jù)渲染到頁面（六）
http://www.itdecent.cn/p/dc532ab82d2a
Vue移動端框架Mint UI教程-接口跨域問題（七）
http://www.itdecent.cn/p/b28cd8290b2a
原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
關(guān)注「編程微刊」公眾號 ，在微信后臺回復「領(lǐng)取資源」，獲取IT資源300G干貨大全。
