本篇文章給大家分享的是有關(guān)Mint-UI如何在vue項目中使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

為嵐縣等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及嵐縣網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、網(wǎng)站建設、嵐縣網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一、Mint UI 是 由餓了么前端團隊推出的 一個基于 Vue.js 的移動端組件庫,具有以下特性: 

• Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。通過它，可以快速構(gòu)建出風格統(tǒng)一的頁面，提升開發(fā)效率。

• 真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。

• 考慮到移動端的性能門檻，Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。

• 依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。

二、首先要創(chuàng)建一個vue項目

三、接著安裝 Mint UI：

npm i mint-ui --save

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

1. 引入全部組件

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

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

2. 按需引入

如果你只需要使用某個組件，可以僅引入這個組件，Mint UI 能夠保證在代碼打包時，與這個組件無關(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);

上面兩種引入方法都要單獨引入相應的 CSS 文件。這很不方便，尤其當你使用按需引入的方法引入多個組件時。

五、為了避免這個問題，可以使用babel-plugin-component插件。

1. 首先當然是安裝它：

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'; //不需要手動導入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);

前面安裝的插件會自動引入相應的 CSS 文件！

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

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

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

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

那么接下來看一下在項目中的使用代碼:

//在main.js里面添加--復制官方文檔該組件對應的引入即可
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>
   <!--這個頭部導航欄關(guān)鍵的是mt-header父標簽,而該標簽內(nèi)的內(nèi)容是根據(jù)需求寫的哦-->
 </mt-header>
</template>

組件效果圖

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

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

我參照第一種方法直接引入文檔的Toast組件,然后在script里面使用,這個時候會報錯:

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

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

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

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

設置完之后就不再報錯了, 再看一下頁面該組件:

以上就是Mint-UI如何在vue項目中使用，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：Mint-UI如何在vue項目中使用
瀏覽地址：http://chinadenli.net/article48/joschp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站建設、Google、自適應網(wǎng)站、企業(yè)建站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)