vue項目引用 iView 組件——全局安裝與按需加載

 

 

框架的熱度，出現了很多基於Vue的UI組件庫，此次項目用到了 iView 這個組件庫。使用方法官網很詳細。

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

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

1、全局引用

①、先安裝iview          npm install iview -save
       Tips：你可能注意npm install 的時候，有時候會加--save，有時又是--save-dev，那他們該什麼狀況下區分使用呢。發現一篇比較不錯的文章https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html

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

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

Vue.use(iView);
 ③、在組件裏面直接調用   如：<Button>Default</Button>

2、按需引用（前提是按照全局引用的步驟①②安裝了須要的組件）

藉助插件 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);

 

③、按需引用能夠在全局註冊組件也能夠在調用的頁面註冊

aaa~組件中調用方法

<template>
    <Button type="success">Success</Button>
</template>
<script>
import { Button } from 'iview'    //用到什麼組件引入什麼組件
export default {
    components:{
        Button
    }
}
</script>

 

bbb~全局註冊須要用的組件

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

 

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