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 的按需加载，优化项目性能。
