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

目录

一、问题场景

二、问题产生原因以及解决办法

1. 出现原因

2. 解决办法 

选择一个你喜欢的包管理器，安装 Element Plus：

在vue3项目的/src/main.js中进行引入即可：

Cannot read property ‘use‘ 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");