Mint-UI基於Vue.js的移動端元件庫
原文地址：https://cloud.tencent.com/developer/doc/1273Mint-UI基於Vue.js的移動端元件庫，它的使用方法類似於Element-UI。
目錄
Mint UI 使用文件
本文將介紹 Mint UI 的安裝方式和基本的用法。
npm 安裝
推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。
npm i mint-ui -S
CDN
目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 檔案即可開始使用。
<!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <!-- 引入元件庫 --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
Hello world
通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入元件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
methods: {
handleClick: function() {
this.$toast('Hello world!')
}
}
})
</script>
</html>如果是通過 npm 安裝，並希望配合 webpack 使用，請閱讀下一節：快速開始。
關於事件繫結
在 Vue 2.0 中，為自定義元件繫結原生事件必須使用 .native 修飾符：
<my-component @click.native="handleClick">Click Me</my-component>
從易用性的角度出發，我們對 Button 元件進行了處理，使它可以監聽 click 事件：
<mt-button @click="handleButtonClick">Click Me</mt-button>
但是對於其他元件，還是需要新增 .native 修飾符。
快速上手
本節將介紹如何在專案中使用 Mint UI。
使用 vue-cli
npm install -g vue-cli vue init webpack projectname
引入 Mint UI
你可以引入整個 Mint UI，或是根據需要僅引入部分元件。我們先介紹如何引入完整的 Mint UI。
完整引入
在 main.js 中寫入以下內容：
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
以上程式碼便完成了 Mint UI 的引入。需要注意的是，樣式檔案需要單獨引入。
按需引入
藉助 babel-plugin-component，我們可以只引入需要的元件，以達到減小專案體積的目的。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然後，將 .babelrc 修改為：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
如果你只希望引入部分元件，比如 Button 和 Cell，那麼需要在 main.js 中寫入以下內容：
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫為
* Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
components: { App }
})
開始使用
至此，一個基於 Vue 和 Mint UI 的開發環境已經搭建完畢，現在就可以編寫程式碼了。啟動開發模式：
npm run dev
編譯：
npm run build
各個元件的使用方法請參閱它們各自的文件。