mint ui(Mint-UI如何在vue項目中使用)

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

• Mint UI 包含豐富的 CSS 和 JS 組件,能夠滿足日常的移動端開發需要。通過它,可以快速構建出風格統一的頁面,提升開發效率。

• 真正意義上的按需加載組件?？梢灾患虞d聲明過的組件及其樣式文件,無需再糾結文件體積過大。

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

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

二、首先要創建一個vue項目

三、接著安裝 Mint UI:

npmimint-ui--save

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

　　1. 引入全部組件

　　　　如果項目會用到 Mint UI 里較多的組件,最簡單的方法就是把它們全部引入。此時需要在入口文件 main.js 中:

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

　　2. 按需引入

　　　　如果你只需要使用某個組件,可以僅引入這個組件,Mint UI 能夠保證在代碼打包時,與這個組件無關的文件不會出現在最終代碼里。比如需要引入 Button 組件,則在 main.js 中:

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

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

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

　　1. 首先當然是安裝它:

npmibabel-plugin-component-D

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

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

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

//importMintfrom'mint-ui';//Vue.use(Mint);//import'mint-ui/lib/style.css';//不需要手動導入mint-ui樣式importButtonfrom'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/

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

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

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

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

//在main.js里面添加--復制官方文檔該組件對應的引入即可import{Header}from'mint-ui';Vue.component(Header.name,Header);<template><mt-headertitle="修改客戶資料"><a@click="toBack"replaceslot="left"><aclass="back-icon"></a></a><!--這個頭部導航欄關鍵的是mt-header父標簽,而該標簽內的內容是根據需求寫的哦--></mt-header></template>

組件效果圖

　　2. 然后看官網文檔的第二種引入和用法:

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

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

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

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

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

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

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

以上就是Mint-UI如何在vue項目中使用,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注本站行業資訊頻道。