vue2-引入ElementUI组件

局部引入

优点：减小项目体积。

第一步：安装babel-plugin-component

?

1	npm install babel-plugin-component -D

第二步：修改babel.config.js文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

module.exports = {   presets: [     ["@babel/preset-env", { "modules": false }]   ],   plugins: [     [       "component",       {         "libraryName": "element-ui",         "styleLibraryName": "theme-chalk"       }     ]   ] }

第三步：新建element文件夹，并在该文件夹下新增index.js，导入需要引入的element组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

//按需引入element组件 import {     Autocomplete,     Dialog,     Dropdown,     DropdownMenu,     DropdownItem,     Input,     Radio,     RadioGroup,     RadioButton,     Select,     Option,     OptionGroup,     Button,     ButtonGroup,     Popover,     Tooltip,     Form,     FormItem,     Tabs,     TabPane,     Tag,     Icon,     Row,     Col,     Upload,     Badge,     Card,     Carousel,     CarouselItem,     Divider,     Image,     Drawer,     Timeline,     TimelineItem,     Avatar,     InfiniteScroll,     Empty,     MessageBox } from 'element-ui';   //封装组件 const element = {     install: function (Vue) {         Vue.use(Autocomplete);         Vue.use(Dialog);         Vue.use(Dropdown);         Vue.use(DropdownMenu);         Vue.use(DropdownItem);         Vue.use(Input);         Vue.use(Radio);         Vue.use(RadioGroup);         Vue.use(RadioButton);         Vue.use(Select);         Vue.use(Option);         Vue.use(OptionGroup);         Vue.use(Button);         Vue.use(ButtonGroup);         Vue.use(Popover);         Vue.use(Tooltip);         Vue.use(Form);         Vue.use(FormItem);         Vue.use(Tabs);         Vue.use(TabPane);         Vue.use(Tag);         Vue.use(Icon);         Vue.use(Row);         Vue.use(Col);         Vue.use(Upload);         Vue.use(Badge);         Vue.use(Card);         Vue.use(Carousel);         Vue.use(CarouselItem);         Vue.use(Divider);         Vue.use(Image);         Vue.use(Drawer);         Vue.use(Timeline);         Vue.use(TimelineItem);         Vue.use(Avatar);         Vue.use(InfiniteScroll);         Vue.use(Empty);         Vue.prototype.$confirm = MessageBox.confirm     } } //抛出整体按需引入的组件 export default element

第四步：修改main.js文件

?

1 2	import element from '@/element/index' Vue.use(element)