本篇文章給大家分享的是有關(guān)Mint-UI如何在vue項(xiàng)目中使用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
為嵐縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及嵐縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、嵐縣網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
一、Mint UI 是 由餓了么前端團(tuán)隊推出的 一個基于 Vue.js 的移動端組件庫,具有以下特性:
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)建一個vue項(xiàng)目
三、接著安裝 Mint UI：
npm i mint-ui --save
四、然后需要引入 Mint UI ,這里有兩種情況:
1. 引入全部組件
如果項(xiàng)目會用到 Mint UI 里較多的組件，最簡單的方法就是把它們?nèi)恳搿４藭r需要在入口文件 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);
上面兩種引入方法都要單獨(dú)引入相應(yīng)的 CSS 文件。這很不方便，尤其當(dāng)你使用按需引入的方法引入多個組件時。
五、為了避免這個問題，可以使用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.首先看下官方文檔的第一種引入和用法:
這種組件引入的時候,有一行Vue.component("對應(yīng)的組件名"),使用的時候是再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);
組件效果圖
2. 然后看官網(wǎng)文檔的第二種引入和用法:
我們可以看到這種組件引入的時候,居然沒有Vue.component("對應(yīng)的組件名"),然后看基本用法,就這么簡單一句......
我參照第一種方法直接引入文檔的Toast組件,然后在script里面使用,這個時候會報錯:
//提示框
import { Toast } from 'mint-ui';
created:function(){
Toast("使用Toast"); //這里是為了測試才寫在created里面,在平時用的時候,是根據(jù)自己需要放在對應(yīng)的位置使用的
}
百度了一下,好像挺多人跟我一樣遇到這個問題的......
其實(shí)我們看下Toast的使用語句,就可以知道Toast是一個方法,既然是方法,直接在js里面未定義使用就會報錯,所以我們在引入該組件的時候,將該方法設(shè)置為全局變量:
//在main.js里面添加,這里需要將Toast方法設(shè)置為全局變量,否則就要在每個用到該方法的vue頁面重新引入該組件....
import { Toast } from 'mint-ui';
window.Toast= Toast;設(shè)置完之后就不再報錯了, 再看一下頁面該組件:
以上就是Mint-UI如何在vue項(xiàng)目中使用，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
