Element-UI 按需加载

Element-UI 我在 Element-UI 的安装与配置使用 这篇已经做过简单的介绍了在此就不赘述了，这里更多的是介绍 Element-UI 的另一种使用方法，即在项目中按需加载其内部组件，以达到减小项目体积的目的。

第一、安装 babel-plugin-component 插件

npm install babel-plugin-component -D

注：如果有使用 vue ui 打开 vue 项目的图形化界面也可以直接安装新的运行依赖直接搜索 babel-plugin-component 选中进行安装即可。

第二：在 src 目录下面创建 plugins 目录，在该目录下面创建 element.js 文件，在该文件中导入所需要的组件。示例代码如下：

import Vue from "vue";
// 在下面的大括号中按需导入所需 Element-UI 中的组件即可
import { Button, Form, FormItem, Input, Message } from "element-ui";

// 注意：导入的组件都需要使用 Vue.use() 进行注册
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
// 还可以在此文件中将 Element-UI 中的组件注册为 Vue 的全局方法，如下
// 为 Vue 挂载一个全局的弹窗提示方法，在组件中使用 this.$message 即可调用
Vue.prototype.$message = Message

第三：在 main.js 文件中导入 element.js 文件。

import "./plugins/element.js";

第四：在项目根目录下的 babel.config.js 文件中添加如下 plugins 的配置信息。  

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

至此我们就完成了在项目中对 Element-UI 插件的按需加载配置，后续在项目中使用到了新的 Element-UI 组件就只需在 element.js 文件中按需导入并注册就可以正常使用了。

好好学习、天天向上！        ：)