Question

如何将 Element UI 添加到 Vue 3

2022-03-28

6207

vue.js vuejs3 vue-composition-api element-ui

我正在尝试将 Element UI 添加到我的 Vue3 项目中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

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

因此，我遵循此文档 https://element.eleme.io/#/en-US/component/quickstart ，但它给了我这个错误：types.js?a742:39 Uncaught TypeError: 无法读取未定义的属性（读取“prototype”）

我不知道在这方面我做错了什么。

Answer 1

您应该使用与 vue 3 兼容的 element-plus ：

安装：

npm install element-plus --save

使用：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Answer 2

如果您使用的是 Nuxt 3，则可以创建一个插件

安装：

npm install element-plus --save

插件：plugins/elementui.js

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus)
})

将插件添加到 nuxt.config.ts

plugins: [
    { src: '~/plugins/elementui.js', mode: 'client' }
  ]

使用（不导入）pages/index.vue：

<el-table :data="list">
  <el-table-column prop="MY_PROP" label="PROP" />
</el-table>