vue 項目中ivew按需引入

官方文檔中介紹了iview的按需引入： 按需引用 # 藉助插件 babel-plugin-import能夠實現按需加載組件，減小文件體積。首先安裝，並在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}
複製代碼

而後這樣按需引入組件，就能夠減少體積了：

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);
複製代碼

可是在咱們的實際項目中使用的組件較多，若是都放在main.js中會是這個文件看起來不易理解。所以咱們能夠新建個js文件來專門存放咱們須要引入的組件以下： 1.新建文件加iview/index.js

import { Card, Button, Table, Menu, Row, Col, Icon, Input, Select, Option, Form, Modal, MenuItem, MenuGroup, Submenu, Tabs, TabPane, Radio, RadioGroup} from 'iview';

const iview = {
    install: function (Vue) {
        Vue.component('Card', Card);
        Vue.component('Button', Button);
        Vue.component('Table', Table);
        Vue.component('Menu', Menu);
        Vue.component('Submenu', Submenu);
        Vue.component('MenuGroup', MenuGroup);
        Vue.component('MenuItem', MenuItem);
        Vue.component('Row', Row);
        Vue.component('Col', Col);
        Vue.component('Icon', Icon);
        Vue.component('Input', Input);
        Vue.component('Select', Select);
        Vue.component('Option', Option);
        Vue.component('Modal', Modal);
        Vue.component('Tabs', Tabs);
        Vue.component('TabPane', TabPane);
        Vue.component('Radio', Radio);
        Vue.component('RadioGroup', RadioGroup)
    }
}

export default iview
複製代碼

2.在main.js中引入

import iview  from "../iview"
Vue.use(iview)
複製代碼

這樣咱們就能夠將須要的組件直接放入index.js文件中了