vue3使用elementui

在Vue 3中使用Element UI，需要安装Element Plus这个版本来适配Vue 3项目。首先，你需要安装Element Plus，可以使用npm或yarn命令进行安装。

安装Element Plus：

npm install element-plus

或者

yarn add element-plus

安装完成后，接下来你可以选择全局引入或按需引入Element Plus组件。

全局引入Element Plus：
在你的Vue 3项目的入口文件（通常是main.js）中，添加以下代码：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(...)
app.use(ElementPlus)
app.mount('#app')

按需引入Element Plus：
如果你希望只引入需要的组件，可以使用babel-plugin-component插件来实现按需引入。首先，安装插件：

npm install babel-plugin-component -D

或者

yarn add babel-plugin-component -D

然后，在babel.config.js文件中添加以下配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

这样就可以按需引入Element Plus的组件了，例如：

import { ElButton, ElInput } from 'element-plus'

以上就是在Vue 3中使用Element Plus的步骤。你可以根据项目的需要选择全局引入或按需引入组件来使用Element Plus的UI组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue3项目中引入ElementUI使用详解](https://blog.csdn.net/m0_46309087/article/details/131277139)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【vue】vue3使用element ui](https://blog.csdn.net/qq_53966155/article/details/126144035)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]