一、Mint UI 是 由餓了么前端團(tuán)隊(duì)推出的 一個(gè)基于 Vue.js 的移動端組件庫,具有以下特性: 使用文檔：  

http://mint-ui.github.io/#!/zh-cn

• Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。通過它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。
• 真正意義上的按需加載組件?？梢灾患虞d聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。
• 考慮到移動端的性能門檻，Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。
• 依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。

二、首先要創(chuàng)建一個(gè)vue項(xiàng)目,參考前面寫的 http://www.fzitv.net/article/131600.htm

三、接著安裝 Mint UI：

npm i mint-ui --save

四、然后需要引入 Mint UI ,這里有兩種情況:

　　1. 引入全部組件

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

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

　　2. 按需引入

　　　　如果你只需要使用某個(gè)組件，可以僅引入這個(gè)組件，Mint UI 能夠保證在代碼打包時(shí)，與這個(gè)組件無關(guān)的文件不會出現(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插件。

　　1. 首先當(dāng)然是安裝它：

npm i babel-plugin-component -D

　　2. 然后在 .babelrc 中配置它：

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2"
 ],
 "plugins": ["transform-runtime",["component",[
   {"libraryName":"mint-ui","style":true}
  ]]],
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

　　3. 這樣上述兩種引入方法就可以簡化為：

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手動導(dǎo)入mint-ui樣式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分組件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

　　　　前面安裝的插件會自動引入相應(yīng)的 CSS 文件！

六、具體使用UI組件 -- 可以直接參考官方文檔http://mint-ui.github.io/docs/

　　使用的過程中發(fā)現(xiàn)Mint UI文檔不是很詳細(xì),很多具體的用法都需要另外百度...

　　1.首先看下官方文檔的第一種引入和用法:

　　這種組件引入的時(shí)候,有一行Vue.component("對應(yīng)的組件名"),使用的時(shí)候是再vue文檔的template部分,使用對應(yīng)的標(biāo)簽名加屬性,其實(shí)就是直接復(fù)制官方文檔的代碼即可,不過相對復(fù)雜多屬性的組件就要另外百度了.

　　那么接下來看一下在項(xiàng)目中的使用代碼:

//在main.js里面添加--復(fù)制官方文檔該組件對應(yīng)的引入即可
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
<template>
 <mt-header title="修改客戶資料">
   <a @click="toBack" replace slot="left">
    <a class="back-icon"></a>
   </a>
   <!--這個(gè)頭部導(dǎo)航欄關(guān)鍵的是mt-header父標(biāo)簽,而該標(biāo)簽內(nèi)的內(nèi)容是根據(jù)需求寫的哦-->
 </mt-header>
</template>

組件效果圖

　　2. 然后看官網(wǎng)文檔的第二種引入和用法:

　　我們可以看到這種組件引入的時(shí)候,居然沒有Vue.component("對應(yīng)的組件名"),然后看基本用法,就這么簡單一句......

　　我參照第一種方法直接引入文檔的Toast組件,然后在script里面使用,這個(gè)時(shí)候會報(bào)錯(cuò):

//提示框
import { Toast } from 'mint-ui';
created:function(){
 Toast("使用Toast"); //這里是為了測試才寫在created里面,在平時(shí)用的時(shí)候,是根據(jù)自己需要放在對應(yīng)的位置使用的
}

　　百度了一下,好像挺多人跟我一樣遇到這個(gè)問題的......

　　其實(shí)我們看下Toast的使用語句,就可以知道Toast是一個(gè)方法,既然是方法,直接在js里面未定義使用就會報(bào)錯(cuò),所以我們在引入該組件的時(shí)候,將該方法設(shè)置為全局變量:

//在main.js里面添加,這里需要將Toast方法設(shè)置為全局變量,否則就要在每個(gè)用到該方法的vue頁面重新引入該組件....
import { Toast } from 'mint-ui';
window.Toast= Toast;

　　設(shè)置完之后就不再報(bào)錯(cuò)了, 再看一下頁面該組件:

組件效果圖

總結(jié)

以上所述是小編給大家介紹的在vue項(xiàng)目中安裝使用Mint-UI，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論