Vue3.0如何使用Element UI组件

最新推荐文章于 2025-07-10 13:24:12 发布

原创最新推荐文章于 2025-07-10 13:24:12 发布 · 1.3w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

Vue知识雨专栏收录该内容

14 篇文章

订阅专栏

本文介绍了在Vue3项目中使用ElementUI遇到的问题及解决方案，由于Vue3不再支持ElementUI，推荐使用ElementPlus进行替代。文章详细展示了如何从ElementUI平滑过渡到ElementPlus的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的是最新的Vue3.0，按照正常的elementui方式引入，结果页面出现空白，控制台出现报错情况。经了解，原来是从Vue3.0不支持Element UI，而是改成了Element Plus。

常规引入elementUI

npm i element-ui -S
main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import '@/assets/scss/reset.scss'

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

createApp(App).use(store).use(router).use(ElementUI).mount('#app')

页面出现报错

在这里插入图片描述

新引入Element Plus

npm install element-plus --save
main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import '@/assets/scss/reset.scss'

import ElementUI from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(store).use(router).use(ElementUI).mount('#app')