官方文档中介绍了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文件中了