vue element ui 按需引入

要按需引入Vue Element UI组件，你需要进行以下几个步骤：
1. 首先，安装Element UI和babel-plugin-component。使用命令`npm i element-ui --save`来安装Element UI，然后使用命令`npm install babel-plugin-component -D`来安装babel-plugin-component插件。
2. 打开项目根目录下的babel.config.js文件，并进行配置。在presets数组中添加`["@babel/preset-env", { "modules": false }]`，在plugins数组中添加以下代码：

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

这个配置会将Element UI的组件按需引入，并引入对应的样式。
3. 新建一个文件`/src/components/plugins/element.js`，并在这个文件中引入所需的Element UI组件。例如，如果你需要使用Button、Form、FormItem和Input组件，你可以在element.js文件中写入以下代码：

import Vue from 'vue'
import { Button } from 'element-ui'
import { Form, FormItem } from 'element-ui'
import { Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

这样就完成了对Element UI组件的按需引入。
4. 在main.js文件中引入自定义的element插件，使用命令`import '@/plugins/element.js'`。这样就可以在组件中正常使用Element UI组件了。例如，在组件的template中可以这样使用Button组件：

<template>
  <div id="app">
    <el-button type="primary">按钮</el-button>
  </div>
</template>

以上就是按需引入Vue Element UI组件的步骤。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [Vue 项目中按需引入 ElementUI](https://blog.csdn.net/qq_46376192/article/details/128792141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [计算机程序设计语言课程设计(VUE.js)及实践项目的例子.txt](https://download.csdn.net/download/weixin_44609920/88236928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]