Vue3.0如何使用Element UI组件

大家都知道饿了么开源了两套Vue的UI组件，Mint UI 移动端的，Element UI PC端的。我使用的是最新的Vue3.0，照着Element的文档引入，结果页面出现白版，F12打开开发者工具一片飘红，一顿操作。原来是从Vue3.0不支持Element UI，而是改成了Element Plus。引入elementUI命令引入参照官方文档：https://element.eleme.cn/#

文章共532字 · 阅读需要大约2分钟

一键AI生成摘要，助你高效阅读

问答

longerJue

12860人浏览 · 2021-04-18 22:15:42

longerJue · 2021-04-18 22:15:42 发布

使用的是最新的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')