如何将elemen-ui现在称为elemen-plus添加到Vue3项目?

问题描述

我一直在使用“ element-ui”,现在继续使用新版本的Vue3。 他们似乎发布了一个名为“ element-plus”的新版本,但本教程未更新。

import Vue from 'vue';  // not working in Vue3
import ElementUI from 'element-plus';
import 'element-ui/lib/theme-chalk/index.css';
...

Vue.use(ElementUI);  // no "Vue" in Vue3 anymore
...
createApp(App).mount('#app') // the new project creation

https://element-plus.org/#/en-US/component/quickstart

有人想要正确地做到这一点并且有效吗?

解决方法

如果您使用的是 vue 3,则需要从“element-plus/...”文件夹中导入 createApp 和 css。然后你使用导入的 vue 函数实例化你的 app,基本上你将你的主要应用程序组件作为参数传递给函数:

import { createApp } from 'vue'
import App from './YourMainApp.vue'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
    
let app = createApp(App)
app.use(ElementPlus)
    
app.mount('#app')