vue-cli@5.X引入ElementUI报错:Uncaught TypeError: Cannot read property ‘prototype‘ of undefined

一、问题场景
创建vue3项目后,按照指引安装ElementUI后,在vue3项目的/src/main.js中新增以下代码进行引入:

import ElementUI from 'element-ui';

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

Vue.use(ElementUI);

结果运行改项目后,页面显示空白,控制台显示如下报错:

Uncaught TypeError: Cannot read property ‘prototype‘ of undefined

......

二、问题产生原因以及解决办法
1. 出现原因
通过网上资料得知,ElementUI是基于Vue2.X的,若使用Vue3.+则需要使用Element Plus!

2. 解决办法
选择一个你喜欢的包管理器,安装 Element Plus:

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus


在vue3项目的/src/main.js中进行引入即可:
以下为官网写法:

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

​​​​​由于本人的main.js中自带的基础代码与上面的不太一样,所以就手贱的自己改了,果不其然,又趟坑里了!!!

Cannot read property ‘use‘ of undefined 报错写法

import Vue,{ createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'

Vue.use(ElementPlus);

createApp(App).use(router).mount("#app");

Vue.use()是Vue 2安装插件的方式

在Vue 3中,import Vue from 'vue'并不能导出”vue“这个包

Vue 3使用createApp(App) 返回应用实例

因此需要将

Vue.use(ElementPlus)

createApp(App).use(router).mount("#app");

改成

createApp(App).use(router).use(ElementPlus).mount("#app");

posted @ 2022-06-23 18:31  鱼香Rosssse  阅读(66)  评论(0)    收藏  举报