【Vue学习总结】24.Vue UI框架 ElementUi 按需引入

接上篇《​​23.Vue UI框架 ElementUi的使用​​》

上一篇我们讲解了Vue UI的PC端框架ElementUI，以及一些使用实例，本篇我们来讲解如何按需引入ElementUI。
本系列博文使用的Vue版本：2.6.11
Element UI 官方网站：​​​https://element.eleme.cn/#/zh-CN​​

一、如何按需打包？

上一篇我们使用ElementUI的方式，引入ElementUI的方法是全量引入，在mian.js中添加了下述配置：

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

Vue.use(ElementUI);

这里是把element-ui的所有组件，以及引入了所有css（index.css）。

但有时候我们为了节省加载的效率，减少项目体积，不想一次性引入所有的组件，想按照需要去引入相应的组件，该怎么做呢？下面我们来看看。

借助babel-plugin-component（巴贝尔）插件，就可以实现按需引入需要的组件（不光是ElementUI，Mint UI也是）。babel-plugin-component实现的效果就是，按照相应的配置项，在打包的时候只引入这些配置项的vue插件文件和css样式，以及字体等其他文件。

二、如何使用babel-plugin-component

1、安装babel-plugin-component

首先，需要安装babel-plugin-component，控制台在工程目录下输入以下指令：

npm install babel-plugin-component -D

然后，在工程目录下找到“.babelrc”名的文件：

把其原来的内容

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

修改为：

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

这里我们来解释一下，“.babelrc”文件是干什么的？里面的配置是什么？

2、babel插件介绍

因为VUE里面使用的是JavaScript最新的es6特性，而es6特性在浏览器上还没有全部支持，所以babel就应运而生，它用来将es6代码转换成浏览器能够识别的代码。

根据官方的解释，babel是下一代JavaScript语法的编译器，它可以让开发者放心的使用最新的JavaScript标准方法，babel会将其编译成兼容绝大多数的主流浏览器的代码。在项目工程脚手架中，一般会使用.babelrc文件，通过配置一些参数配合webpack进行打包压缩。

.babelrc配置文件主要针对“预设（presets）”和“插件（plugins）”进行配置，不同的转义器作用不同的配置项，大致可以分为以下三项：
（1）语法转义器，主要针对JavaScript最新的语法糖进行编译，并不负责转义JavaScript新增的api和全局对象。常用到的转义器包有，babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在实际开发中可以只选用babel-preset-env来代替余下的，但是还需要配上javascirpt的制作规范一起使用，同时也是官方推荐

{
 "presets": ["env", { "modules": false }],
  "stage-2"
}

（2）补丁转义器。主要负责转义JavaScript新增的API和全局对象。
（3）jsx和flow插件，这类转译器用来转译JSX语法和移除类型声明的，使用Rect的时候你将用到它，转译器名称为babel-preset-react。
具体的对“预设（presets）”和“插件（plugins）”的详细解释，可以查看这篇文章：​​​《babel之配置文件.babelrc入门详解》​​，这里不再赘述。

我们就简单解释一下上面在.babelrc中修改完的配置：

{
  /*预设转义包的版本，使用babel-preset-env插件包。后面是option信息，其中包括targets和modules,这里将原来用于制定兼容浏览器版本的targets删除了,留下了modules，即不默认支持CommonJS规范。*/
  "presets": [["env", { "modules": false }]], 
  /*插件信息，里面定义了引入element-ui的组件库，可以在import的时候，按需加载需要的组件*/
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、引入部分组件的方式

当babel-plugin-component安装完毕，在.babelrc中的配置也修改完毕后，就可以按需引入了。例如我们只需要使用Button（按钮）和 Select（选择器）组件，我们只需要在main.js中添加如下配置：

import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

即声明需要引入的插件数组，并分别实例化一下。

我们先在ElementUI全部引入的情况下，编写一个ElementUI.vue页面，里面有Button（按钮）、Select（选择器）、Switch（开关）、Slider（滑块）元素：

<template>
  <div id="ElementUI">
    <h1>{{ msg }}</h1>
    <p> Button（按钮）</p>
    <el-row>
      <el-button type="success">成功按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <hr/>
    <p> Select（选择器）</p>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <hr/>
    <p> Switch（开关）</p>
    <el-switch
      v-model="value1"
      active-color="#13ce66"
      inactive-color="#ff4949"></el-switch>
    <hr/>
    <p> Slider（滑块）</p>
    <el-slider v-model="value2" :format-tooltip="formatTooltip"></el-slider>
  </div>
</template>
 
<script>
export default {
  name: "ElementUI",
  data() {
    return {
      msg: "Element-UI",
      options: [
        {value: "选项1",label: "黄金糕"},
        {value: "选项2",label: "双皮奶"},
        {value: "选项3",label: "蚵仔煎"},
        {value: "选项4",label: "龙须面"},
        {value: "选项5",label: "北京烤鸭"},
      ],
      value: "",
      value1:true,
      value2:48
    };
  }
};
</script>
 
<style scoped>
</style>

效果：

然后我们把原来的：

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

Vue.use(ElementUI);

删除，改为只引入Button（按钮）和 Select（选择器）组件：

import { Button, Select } from 'element-ui';

Vue.use(Button);
Vue.use(Select);

然后重启项目（一定要重启，让项目重新加载组件），重新访问ElementUI.vue页面，效果：

可以看到，成功加载了Button（按钮）和 Select（选择器）组件，其他的Switch（开关）、Slider（滑块）都没有显示，这就实现了按需引入的效果。

4、引入组件的名字列表

下面是官方提供的按需引入的完整组件列表和引入方式，我们可以根据需要去选择性引用：

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;

以上就是如何按需引入ElementUI组件。至此，我们的vue础基本上讲解完毕了，下一篇我们来介绍vuex。

参考：
​​​https://www.jb51.net/article/135225.htm​​ 《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

​