elementui按需

ElementUI 按需引入方法

ElementUI 支持按需引入组件，以减少最终打包体积。以下是具体实现方式：

安装 babel-plugin-component

需要安装官方推荐的 babel 插件：

npm install babel-plugin-component -D

配置 .babelrc 或 babel.config.js

在项目根目录下的 babel 配置文件中添加：

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

按需引入组件

在需要使用的地方单独引入组件：

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

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

全局注册常用组件

可以创建一个单独的配置文件（如 element.js）集中管理：

import {
  Button,
  Input,
  Table,
  TableColumn
} from 'element-ui'

const components = [
  Button,
  Input,
  Table,
  TableColumn
]

const install = function(Vue) {
  components.forEach(component => {
    Vue.use(component)
  })
}

export default {
  install
}

样式文件处理

确保在项目入口文件引入基础样式：

import 'element-ui/lib/theme-chalk/index.css'

Vue CLI 项目配置

对于 Vue CLI 创建的项目，可以在 vue.config.js 中添加配置：

module.exports = {
  transpileDependencies: ['element-ui']
}

注意事项

按需引入时每个组件需要单独注册，未注册的组件无法使用。生产环境下这种方式可显著减小打包体积，但开发时可能增加配置复杂度。