要按
需引入Vue Element UI组件，你
需要进行以下几个
步骤：
1. 首先，安装
Element UI和bab
el-plugin-component。使用命令`npm i
element-ui --save`来安装
Element UI，然后使用命令`npm install bab
el-plugin-component -D`来安装bab
el-plugin-component插件。
2. 打开项目根目录下的bab
el.config.js文件，并进行配置。在presets数组
中添加`["@bab
el/preset-env", { "modules": false }]`，在plugins数组
中添加以下代码：
```javascript
["component", {
libraryName: "
element-ui",
styl
eLibraryName: "theme-chalk"
}]
```
这个配置会将
Element UI的组件按
需引入，并
引入对应的样式。
3. 新建一个文件`/src/components/plugins/
element.js`，并在这个文件
中引入所
需的
Element UI组件。例如，如果你
需要使用Button、Form、FormItem和Input组件，你可以在
element.js文件
中写入以下代码：
```javascript
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组件：
```html
<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 ]
5300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
