隨著Vue框架的熱度，出現了不少基於Vue的UI元件庫，這次專案用到了 iView 這個元件庫。使用方法官網很詳細。

官網：https://www.iviewui.com/

這篇文章主要是記錄一下npm 全域性安裝以及按需引用的用法。

一、全域性引用

①、先安裝iview          npm install iview -save
       Tips：你可能注意npm install 的時候，有時候會加--save，有時又是--save-dev，那他們該什麼情況下區分使用呢。發現一篇比較不錯的文章

②、在 webpack 入口頁面 main.js 中如下配置

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

 ③、在元件裡面直接呼叫   如：<Button>Default</Button>

二、按需引用（前提是按照全域性引用的步驟①②安裝了需要的元件）

藉助外掛 babel-plugin-import可以實現按需載入元件，減少檔案體積。

①、先安裝 babel-plugin-import          npm install babel-plugin-import --save-dev

②、在檔案 .babelrc 中新增配置

"plugins": [
    "transform-vue-jsx", "transform-runtime",
    ["import", {
      "libraryName": "iview",
      "libraryDirectory": "src/components"
    }]
  ]
 

本以為萬事大吉，可以開始用了，但是報錯了！！！！！

別慌~~~~~~查閱一些資料之後瞭解到，新增按需載入的外掛之後就不可以用下面的方式引入iview。main.js只需配置css

import Vue from 'vue'
// import iView from 'iview'
import 'iview/dist/styles/iview.css'

// Vue.use(iView);

③、元件中呼叫方法

<template>
    <Button type="success">Success</Button>
</template>

<script>
import { Button } from 'iview'    //用到什麼元件引入什麼元件
export default {
    components:{
        Button
    }
}
</script>

下面就來驗證一下結果， 打包後的vender.js確實變化比較大。