Mint UI

臨潭ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

GitHub：github.com/ElemeFE/mint

項(xiàng)目主頁(yè)：mint-ui.github.io/#

Demo：elemefe.github.io/mint-

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

由餓了么前端團(tuán)隊(duì)推出的 Mint UI 是一個(gè)基于 Vue.js 的移動(dòng)端組件庫(kù)。自 6 月初開源以來，根據(jù)社區(qū)和團(tuán)隊(duì)內(nèi)部的反饋，修復(fù)了一些 bug 并新增了部分組件，于本周發(fā)布了 0.2.0 版本。本文介紹如何從零開始構(gòu)建一個(gè)使用 Mint UI 的 Vue 項(xiàng)目。

腳手架

隨著 Vue.js 的迅速發(fā)展，目前搭建一個(gè) Vue 項(xiàng)目的腳手架已經(jīng)有不少選擇了。比如可以使用官方提供的 vue-cli。本文使用餓了么自己的構(gòu)建工具 cooking 來完成這個(gè)任務(wù)。

首先，全局安裝 cooking：

npm i cooking -g

新建項(xiàng)目文件夾：

mkdir mint-ui-example

進(jìn)入項(xiàng)目文件夾，使用 cooking 進(jìn)行構(gòu)建：

cooking init vue

最后的參數(shù) vue 表示構(gòu)建的是基于 Vue.js 的腳手架。

在構(gòu)建過程中，cooking 需要如下一些參數(shù)：

其中“使用何種 CSS 預(yù)處理”這里選擇的是 Salad，它是一套基于 PostCSS 的解決方案，有興趣的同學(xué)可以了解一下。當(dāng)然，你也可以選擇其他的預(yù)處理器。

完成構(gòu)建后的項(xiàng)目結(jié)構(gòu)為：

接下來安裝 Mint UI：

npm i mint-ui --save

引入 Mint UI

好了，之后的工作可以分為兩種情況：

1. 引入全部組件
如果你的項(xiàng)目會(huì)用到 Mint UI 里較多的組件，最簡(jiǎn)單的方法就是把它們?nèi)恳?。此時(shí)需要在入口文件 main.js 中：

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

2. 按需引入

如果你只需要使用某個(gè)組件，可以僅引入這個(gè)組件，Mint UI 能夠保證在代碼打包時(shí)，與這個(gè)組件無關(guān)的文件不會(huì)出現(xiàn)在最終代碼里。比如需要引入 Button 組件，則在 main.js 中：

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';

Vue.component(Button.name, Button);

可以看出，上面兩種引入方法都要單獨(dú)引入相應(yīng)的 CSS 文件。這很不方便，尤其當(dāng)你使用按需引入的方法引入多個(gè)組件時(shí)。為了避免這個(gè)問題，可以使用babel-plugin-component 插件。首先當(dāng)然是安裝它：

npm i babel-plugin-component -D

然后在 .babelrc 中配置它：

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

這樣上述兩種引入方法就可以簡(jiǎn)化為：

import MintUI from 'mint-ui';

Vue.use(MintUI);

和

import Button from 'mint-ui/lib/button';

Vue.component(Button.name, Button);

插件會(huì)自動(dòng)引入相應(yīng)的 CSS 文件。

使用

每個(gè)組件的使用方法請(qǐng)閱讀文檔，這里只舉一個(gè)微小的例子。在 app.vue 中：

則會(huì)得到如下頁(yè)面：

預(yù)告

以上就是 Mint UI 的使用方法介紹。如果在使用的過程中遇到任何問題，或者是想給我們一些建議，歡迎大家去 GitHub 倉(cāng)庫(kù)提 issue。

可能有些同學(xué)知道，除了這個(gè)移動(dòng)端組件庫(kù)以外，餓了么還有一套桌面端組件庫(kù)vue-desktop。目前我們正在對(duì)它進(jìn)行重構(gòu)，這次有了 UED 的介入，整體視覺有了很大的提升。完成后也會(huì)開源，而且會(huì)有兩個(gè)版本，分別支持 vue 1.0.x 和 vue 2.0。當(dāng)然，Mint UI 也會(huì)考慮支持 vue 2.0。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。