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

目录




内容

1、版本简介

版本简介
@vue/cli4.4.6vue脚手架,搭建vue项目
vue2.6.11vue框架核心
element-ui2.13.2UI框架
babel-plugin-component1.1.1element-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; 简单的登录页面展示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wuianH4O-1593186242637)(./images/login.png)]

后记

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

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

前往低代码交流专区

更多推荐