Vue ElementUI 按需引入

一、安装 babel 插件

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm i babel-pugin-componet -D

项目根目录下新建 .babelrc 文件，配置如下：

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

二、项目根目录下新建 element/index.js 文件，按需加载

组件名称小tip，例如：

单个词的组件：<el-select>  使用时以 el 为前缀，按需引入时大写开头为 Select，css 文件引入小写开头如 select.css。

多个词的组件：<el-collapse-item> 使用时以 el 为前缀，按需引入大写开头且为大驼峰 CollapseItem，css 文件引入小写开头且 - 隔开 collapse-item.css。

import Vue from 'vue'

// 按需引入：base.css 基础样式必须引入，其它组件样式按需引入
import "element-ui/packages/theme-chalk/lib/base.css";
import "element-ui/packages/theme-chalk/lib/collapse.css";
import "element-ui/packages/theme-chalk/lib/collapse-item.css";
import "element-ui/packages/theme-chalk/lib/select.css";
import "element-ui/packages/theme-chalk/lib/option.css";

import { Collapse, CollapseItem, Select, Option } from 'element-ui'

Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Select);
Vue.use(Option);

main.js 文件引入 

import Vue from 'vue'
import App from './App.vue'
import './elementui/index.js'

new Vue({
  render: h => h(App)
}).$mount('#app')

三、打包后的对比

项目较小，且只使用了 4 个组件。所以打包后达到减小项目体积的目的。

 项目较大时，且使用了 24 个组件。虽然打包后项目体积有减小，但不明显。

虽然按需引入减小了项目打包后的体积，但全局引入更方便使用，不需要考虑按需加载的组件名和css文件名。所以请酌情考虑。

四、官网

https://element.eleme.cn/#/zh-CN/component/quickstart