1. 程式人生 > >vue 專案中ivew按需引入

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檔案中了