vue学习-element-ui全部导入与按需加载

vue学习-element-ui全部导入与按需加载

---

目录

---

---

内容

---

1、版本简介

	版本	简介
@vue/cli	4.4.6	vue脚手架，搭建vue项目
vue	2.6.11	vue框架核心
element-ui	2.13.2	UI框架
babel-plugin-component	1.1.1	element-ui按需加载组件

1、element-ui安装

	npm i element-ui -S

• 解析：
  • i：install 安装
  • -S：本地项目依赖安装

2、全部导入

  在main.js中导入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3、按需加载

• 首先，安装babel-plugin-component:

    npm install babel-plugin-component -D
  

• 其次，配置babel.config.js文件

    "plugins": [
    	[
    	  "component",
    	  {
    		"libraryName": "element-ui",
    		"styleLibraryName": "theme-chalk"
    	  }
    	]
      ]
  

完整.babel.comfig.js如下，前面部分为默认

module.exports = {
  presets: [
	'@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
	[
	  "component",
	  {
		"libraryName": "element-ui",
		"styleLibraryName": "theme-chalk"
	  }
	]
  ]
}

• 需要哪些element-ui组件就加载哪些组件，单独定义个element.js文件，常用组件如下,根据需要增删

    import Vue from 'vue';
    import {
      Pagination,
      Dialog,
      Autocomplete,
      Dropdown,
      DropdownMenu,
      DropdownItem,
      Menu,
      Submenu,
      MenuItem,
      MenuItemGroup,
      Input,
      InputNumber,
      Radio,
      RadioGroup,
      RadioButton,
      Checkbox,
      CheckboxButton,
      CheckboxGroup,
      Switch,
      Select,
      Option,
      OptionGroup,
      Button,
      ButtonGroup,
      Table,
      TableColumn,
      DatePicker,
      TimeSelect,
      TimePicker,
      Popover,
      Tooltip,
      Breadcrumb,
      BreadcrumbItem,
      Form,
      FormItem,
      Tabs,
      TabPane,
      Tag,
      Tree,
      Alert,
      Slider,
      Icon,
      Row,
      Col,
      Upload,
      Progress,
      Spinner,
      Badge,
      Card,
      Rate,
      Steps,
      Step,
      Carousel,
      CarouselItem,
      Collapse,
      CollapseItem,
      Cascader,
      ColorPicker,
      Transfer,
      Container,
      Header,
      Aside,
      Main,
      Footer,
      Timeline,
      TimelineItem,
      Link,
      Divider,
      Image,
      Calendar,
      Backtop,
      PageHeader,
      CascaderPanel,
      Loading,
      MessageBox,
      Message,
      Notification
    } from 'element-ui';
  
    Vue.use(Pagination);
    Vue.use(Dialog);
    Vue.use(Autocomplete);
    Vue.use(Dropdown);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    Vue.use(Menu);
    Vue.use(Submenu);
    Vue.use(MenuItem);
    Vue.use(MenuItemGroup);
    Vue.use(Input);
    Vue.use(InputNumber);
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Checkbox);
    Vue.use(CheckboxButton);
    Vue.use(CheckboxGroup);
    Vue.use(Switch);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(OptionGroup);
    Vue.use(Button);
    Vue.use(ButtonGroup);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(DatePicker);
    Vue.use(TimeSelect);
    Vue.use(TimePicker);
    Vue.use(Popover);
    Vue.use(Tooltip);
    Vue.use(Breadcrumb);
    Vue.use(BreadcrumbItem);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(Tag);
    Vue.use(Tree);
    Vue.use(Alert);
    Vue.use(Slider);
    Vue.use(Icon);
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Upload);
    Vue.use(Progress);
    Vue.use(Spinner);
    Vue.use(Badge);
    Vue.use(Card);
    Vue.use(Rate);
    Vue.use(Steps);
    Vue.use(Step);
    Vue.use(Carousel);
    Vue.use(CarouselItem);
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    Vue.use(Cascader);
    Vue.use(ColorPicker);
    Vue.use(Transfer);
    Vue.use(Container);
    Vue.use(Header);
    Vue.use(Aside);
    Vue.use(Main);
    Vue.use(Footer);
    Vue.use(Timeline);
    Vue.use(TimelineItem);
    Vue.use(Link);
    Vue.use(Divider);
    Vue.use(Image);
    Vue.use(Calendar);
    Vue.use(Backtop);
    Vue.use(PageHeader);
    Vue.use(CascaderPanel);
  
    Vue.use(Loading.directive);
  
    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$notify = Notification;
    Vue.prototype.$message = Message;
  

• 最后，在main.js中导入该elementjs即可,我的element.js放置在src/plugins/element.js:

    import './plugins/element.js'
  

4、全部导入与按需加载比较

• 全部倒入：配置简单，不需要额外的插件，文件，但是需要消耗较多的资源，适合在开发测试时使用。
• 按需加载：配置稍微复杂，但是消耗系统资源少，适合生成环境使用。

&esmp; 简单的登录页面展示：

后记 ：

  本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue-leyou
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA