Mint-UI是是一個(gè)基于 Vue.js 的移動(dòng)端組件庫，包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開發(fā)需要。
優(yōu)點(diǎn)：

• 高效
  可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。
• 體驗(yàn)度高
  Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。
• 輕量化
  依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。
  目前已經(jīng)兼容vue2.0，放心使用
  安利過后，開始進(jìn)入正題，快速開始

1、安裝

根據(jù)之前的開發(fā)環(huán)境，打開項(xiàng)目，打開終端，選擇2.0安裝命令

# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

安裝成功如下圖：

image.png

2、引入

• 方式一：引入全部組件
  如果你的項(xiàng)目會(huì)用到 Mint UI 里較多的組件，最簡單的方法就是把它們?nèi)恳?。?dāng)然也省時(shí)省力
  找到src / main.js 文件
  在原來基礎(chǔ)上添加

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

• 方式二：按需引入
  如果你只需要使用某個(gè)組件，可以僅引入這個(gè)組件，Mint UI 能夠保證在代碼打包時(shí)，與這個(gè)組件無關(guān)的文件不會(huì)出現(xiàn)在最終代碼里。
  例如：需要引入 Button 組件，
  在src / main.js中：

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

3、使用

在我們的.vue文件中，簡單添加幾個(gè)組件測試一下，例如：

<template>
  <div class="home">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
    <h1>home</h1>
  </div>
</template>

命令運(yùn)行 npm run dev

image.png

4、優(yōu)化

問題：引入mintUI時(shí)都要單獨(dú)引入相應(yīng)的 CSS 文件。當(dāng)使用按需引入的方法引入多個(gè)組件時(shí)，非常不方便。

解決：使用babel-plugin-component插件。

• 安裝

npm i babel-plugin-component -D

在跟目錄下有個(gè) .babelrc 文件

• 配置

 "plugins": ["transform-runtime",
    ["component",
      { 
        "libraryName": "mint-ui", 
        "style": true 
      } 
  ]],

?? 注意：
代碼結(jié)構(gòu)如下：

{
  "presets": [
    ["env", {
      "modules": false,
      ......
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",
    ["component",
      { 
        "libraryName": "mint-ui", 
        "style": true 
      } 
  ]],
  "env": {
    .......
  }
}

可能每個(gè)人生成的文件中，細(xì)節(jié)不太一樣，看清楚結(jié)構(gòu)，配置相應(yīng)的屬性，如果配錯(cuò)了，看看上述代碼結(jié)構(gòu)，是不是放錯(cuò)位置或者，少寫或多寫了標(biāo)點(diǎn)符號

現(xiàn)在我們可以簡化一下之前的引入代碼

• 方法一中

import MintUI from 'mint-ui';
Vue.use(MintUI);

• 方法二中

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

這時(shí)插件會(huì)自動(dòng)引入相應(yīng)的 CSS 文件。
運(yùn)行效果和之前一樣就是成功了，可以開始寫漂亮的界面了