在vue項目中安裝使用Mint-UI

1、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。

2、首先要建立一個vue項目,參考前面寫的  http://www.cnblogs.com/stella1024/p/7598837.html

3、接着安裝 Mint UI：

npm i mint-ui --save

4、而後須要引入 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 文件。這很不方便，尤爲當你使用按需引入的方法引入多個組件時。

 

5、爲了不這個問題，可使用 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 文件！

6、具體使用UI組件   -- 能夠直接參考官方文檔  http://mint-ui.github.io/docs/#/zh-cn2

　　使用的過程當中發現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;

　　設置完以後就再也不報錯了, 再看一下頁面該組件:

　　組件效果圖

 

7、總結

　　好啦, 講解完啦,有疑問的話直接在下面留言哦!(#^.^#)