基於VUE.JS的移動端框架Mint UI

Mint UI

GitHub：github.com/ElemeFE/mint

項目主頁：mint-ui.github.io/#

Demo：elemefe.github.io/mint-

文檔：mint-ui.github.io/docs/#

由餓了麼前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端組件庫。自 6 月初開源以來，根據社區和團隊內部的反饋，修復了一些 bug 並新增了部分組件，於本週發佈了 0.2.0 版本。本文介紹如何從零開始構建一個使用 Mint UI 的 Vue 項目。

腳手架

隨着 Vue.js 的迅速發展，目前搭建一個 Vue 項目的腳手架已經有很多選擇了。好比可使用官方提供的 vue-cli。本文使用餓了麼本身的構建工具 cooking 來完成這個任務。

首先，全局安裝 cooking：

npm i cooking -g

新建項目文件夾：

mkdir mint-ui-example

進入項目文件夾，使用 cooking 進行構建：

cooking init vue

最後的參數 vue 表示構建的是基於 Vue.js 的腳手架。

在構建過程當中，cooking 須要以下一些參數：

其中「使用何種 CSS 預處理」這裏選擇的是 Salad，它是一套基於 PostCSS 的解決方案，有興趣的同窗能夠了解一下。固然，你也能夠選擇其餘的預處理器。

完成構建後的項目結構爲：

接下來安裝 Mint UI：

npm i mint-ui --save

引入 Mint UI

好了，以後的工做能夠分爲兩種狀況：

1. 引入所有組件

若是你的項目會用到 Mint UI 裏較多的組件，最簡單的方法就是把它們所有引入。此時須要在入口文件 main.js 中：

import MintUI from 'mint-ui'; import 'mint-ui/lib/style.css'; Vue.use(MintUI); 

2. 按需引入

若是你只須要使用某個組件，能夠僅引入這個組件，Mint UI 可以保證在代碼打包時，與這個組件無關的文件不會出如今最終代碼裏。好比須要引入 Button 組件，則在 main.js 中：

import Button from 'mint-ui/lib/button'; import 'mint-ui/lib/button/style.css'; Vue.component(Button.name, Button); 

能夠看出，上面兩種引入方法都要單獨引入相應的 CSS 文件。這很不方便，尤爲當你使用按需引入的方法引入多個組件時。爲了不這個問題，可使用 babel-plugin-component 插件。首先固然是安裝它：

npm i babel-plugin-component -D

而後在 .babelrc 中配置它：

{ "plugins": ["other-plugin", ["component", [ { "libraryName": "mint-ui", "style": true } ]]] } 

這樣上述兩種引入方法就能夠簡化爲：

import MintUI from 'mint-ui'; Vue.use(MintUI); 

和

import Button from 'mint-ui/lib/button'; Vue.component(Button.name, Button); 

插件會自動引入相應的 CSS 文件。

使用

每一個組件的使用方法請閱讀文檔，這裏只舉一個微小的例子。在 app.vue 中：

<template> <h1>mint-ui-example</h1> <mt-button type="primary" @click="sheetVisible = true"> 選擇操做 </mt-button> <mt-actionsheet cancel-text="" :actions="actions" :visible.sync="sheetVisible"> </mt-actionsheet> </template> <script> import { Toast, MessageBox } from 'mint-ui'; export default { name: 'app', data() { return { sheetVisible: false, actions: [{ name: '展現 Toast', method: this.showToast }, { name: '展現 Message Box', method: this.showMsgbox }] }; }, methods: { showToast() { Toast('這是一個 Toast'); }, showMsgbox() { MessageBox('提示', '這是一個 Message Box'); } } }; </script> 

則會獲得以下頁面：

預告

以上就是 Mint UI 的使用方法介紹。若是在使用的過程當中遇到任何問題，或者是想給咱們一些建議，歡迎你們去 GitHub 倉庫提 issue。

可能有些同窗知道，除了這個移動端組件庫之外，餓了麼還有一套桌面端組件庫 vue-desktop。目前咱們正在對它進行重構，此次有了 UED 的介入，總體視覺有了很大的提高。完成後也會開源，並且會有兩個版本，分別支持 vue 1.0.x 和 vue 2.0。固然，Mint UI 也會考慮支持 vue 2.0。