elementui按需

按需引入 Element UI

Element UI 支持按需引入组件，以减少最终打包体积。以下是实现按需引入的详细步骤。

安装 babel-plugin-component

使用 babel-plugin-component 插件可以简化按需引入的配置。通过 npm 或 yarn 安装：

npm install babel-plugin-component -D
# 或
yarn add babel-plugin-component --dev

配置 Babel

在项目的 .babelrc 或 babel.config.js 中添加以下配置：

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

按需引入组件

在代码中仅引入需要的组件，例如引入 Button 和 Select：

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

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

按需引入样式

确保样式文件也被按需引入。如果配置了 styleLibraryName，插件会自动处理样式。

注意事项

• 使用 Vue CLI 创建的项目，需检查是否已正确处理 Babel 配置。
• 若遇到样式未加载的问题，检查 theme-chalk 是否已正确安装。
• 按需引入后，打包体积会显著减小，但需确保所有用到的组件都已显式引入。

完整示例

以下是一个完整的按需引入示例：

// main.js
import Vue from 'vue';
import { Button, Input } from 'element-ui';

Vue.use(Button);
Vue.use(Input);

new Vue({
  el: '#app',
  render: h => h(App)
});

通过以上步骤，可以实现 Element UI 的按需加载，优化项目性能。