如何将 element-ui（现在称为 element-plus）添加到 Vue3 项目？答案

【问题标题】：How to add element-ui (now called element-plus) to Vue3 project?如何将 element-ui（现在称为 element-plus）添加到 Vue3 项目？
【发布时间】：2020-09-30 08:46:50
【问题描述】：

我一直在使用“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

任何人都设法做对并且有效吗？

【问题讨论】：

请查看 vue3 迁移指南：v3.vuejs.org/guide/migration/…
它只是不起作用......对不起
你尝试了什么？ const app = creatApp(App); app.use(ElementUI) ?
我也遇到了同样的问题。 @AngularOne 你成功了吗？

标签： vuejs2 vuejs3 element-ui element-plus

【解决方案1】：

如果您使用的是 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')

【讨论】：

【解决方案2】：

你也可以很容易地做到这一点，无需任何 js 捆绑器。

这是一个示例：

var Main = {
    data() {
      return {
          message: 'Hello World!'
      }
    },
    methods: {
        click()  {
          console.log('click()');
        }          
    }
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")

<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
    <el-button type="primary" size="medium" @click="click">{{message}}</el-button>
</div>
</body>
</html>

【讨论】：