Mint UI 是由餓了麼前端團隊推出的一個基於Vue.js 的行動端元件庫,下面透過本文給大家介紹在vue專案中安裝使用Mint-UI的方法，需要的朋友參考下吧
一、Mint UI 是由餓了麼前端團隊推出的一個基於Vue.js 的行動裝置元件庫,具有以下特性: 使用文件：
#http://mint-ui. github.io/#!/zh-cn
Mint UI 包含豐富的CSS 和JS 元件，能夠滿足日常的行動端開發需求。透過它，可以快速建立風格統一的頁面，提升開發效率。
真正意義上的按需載入元件。可以只載入聲明過的元件及其樣式文件，無需再糾結文件體積過大。
考慮到行動裝置的效能門檻，Mint UI 採用CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。
依托 Vue.js 高效的元件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮後的檔案體積也僅有 ~30kb (JS CSS) gzip。
二、首先要建立一個vue專案
三、接著安裝Mint UI：
npm i mint-ui --save
四、然後需要引入Mint UI ,這裡有兩種情況:
1. 引入全部元件
如果專案會用到Mint UI 裡較多的元件，最簡單的方法就是把它們全部引入。此時需要在入口檔案 main.js 中：
import Mint from 'mint-ui'; Vue.use(Mint); import 'mint-ui/lib/style.css';
2.按需引入
如果你只需要使用某個元件，可以只引入這個元件，Mint UI 能夠保證在程式碼打包時，與這個元件無關的檔案不會出現在最終程式碼中。例如需要引入 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/
使用的過程中發現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>
<!--这个头部导航栏关键的是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; 設定完之後就不再報錯了, 再看一下頁面該元件:
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
在vue canvas中有關excel-like元件如何使用
##
以上是在vue專案中安裝Mint-UI的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
