ElementUI按需引入以及message、messageBox等按需引入的坑(不需要安装插件版)

前言：在Vue项目中一般会使用很多个Element的组件且为了省事会直接导入整个ELementUI，这样就会导致一个后期打包的体积过大的问题了，那么这个时候我们就需要按需引入了， 赶时间的朋友直接跳过坑的部分按步骤创建文件复制代码即可，有兴趣看坑是什么的朋友可以了解一下。

1.创建element组件文件

在component里面创建一个名为ElementUI的js文件，叫名字和放在哪全由你，我习惯放在外面的component里面且直接用element来命名好找点。
然后引入的方式如下所示:

import {
  Header,
  Option,
  TabPane,
  Submenu,
  Notification,
  Footer,
  RadioButton,
  RadioGroup
} from "element-ui";

然后我们引入后需要把他们等于是启动一下，这样我们按需引入就完成一半了

const elementComponents = {
  Dialog,
  Tooltip,
  Popconfirm,
  Card,
  Timeline,
  TimelineItem,
  Divider,
  Calendar,
  Image,
  Drawer,
  Main,
  Aside,
  Header,
  Option,
  TabPane,
  Submenu,
  Footer,
  RadioButton,
  RadioGroup  // 给上面引入的全给他整在一个对象里头
              //我这个不一样是因为太长了，不好弄，我删了一点
};
function install(Vue) {  // 然后定义一个启动函数
    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;
  Object.keys(elementComponents).forEach((key) =>
    Vue.use(elementComponents[key])
  ); // 遍历对象里每一个组件把他们一个个启动
}
export default { install };  //然后导出函数

虽然以上的导入直接复制就能用，但是有以下两点坑要注意(小Tips:坑的讲解可能有点长，不想听或者赶时间的朋友可以直接跳到下面的第二步即可)：


1. 一般来说某个组件都会有附属组件的，比如说大家最常见的table表格组件，如果要引入他的话不只是需要引入table，还要引入他里面的附属组件TableColumn，不然的话你的table能使用但是里面全是空白且报错，又比如form表单，它里面有个附属组件formItem,熟悉吧，对，它里面有很多这种附属组件。


2. 可以看见，我上面const里的组件里面没有message与messageBox和Notification,为啥呢，因为这三个东西比较独特，他们需要直接刻在Vue的原型中，也就是我上方写的Vue.prototype.$msgbox = MessageBox;这个亚子，如果说不这样的话他就会出BUG且不能用。具体什么BUG有兴趣的朋友可以自行试试看因为messageBox呢有四种使用方式，所以要整他个四次。

以上就是按需引入的主要坑了。

2.创建element组件文件

在main.js里面全局引入，这个时候因为你是在main.js里面引入的是你按需引入的组件，而不是整个element组件库,所以这个时候就可以达到减少项目打包体积的效果了

// 按需引入elementUi
import elementComponents from "./components/elementUi";
Vue.use(elementComponents);

好了，到了这个时候就可以全局使用你按需导入的elementUI组件了。
完结撒花。