Vue开发实例(06)之Vue3注册Element-ui报错解决

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

作者简介

作者名编程界明世隐
简介CSDN博客专家从事软件开发多年精通Java、JavaScript博主也是从零开始一步步把学习成长、深知学习和积累的重要性喜欢跟广大ADC一起打野升级欢迎您关注期待与您一起学习、成长、起飞

引言

Vue是现在前端最流行的框架之一作为前端开发人员应该要熟练的掌握它如果你是打算学习Vue的开发流程那么来吧明哥带你快速上手、带你飞
即使你并非前端开发人员对前端的开发流程进行一定的了解也是很有必要的谁也不确定公司以后会不会让我做前端去做些简单的实例既不需要花费很多时间也可以提高自己的自信和成就感所以跟着明哥走没有错来吧

导航

✪  Vue开发实例目录总索引
上一篇【05】搭建项目主页面头部、导航、主体等页面布局
下一篇【07】编写头部页面

错误描述

之前在使用Vue3全局注册element的时候发现错误如下

Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/types.js:39)
at Object…/node_modules/element-ui/lib/utils/types.js (chunk-vendors.js:2923)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/util.js:19)
at Object…/node_modules/element-ui/lib/utils/util.js (chunk-vendors.js:2935)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/locale/format.js:49)
at Object…/node_modules/element-ui/lib/locale/format.js (chunk-vendors.js:2526)

之前的解决方案

重新创建vue项目从使用Vue3改成Vue2 再注册element就不会有问题。

可以看此文章 Vue项目引入element_ui

新的解决方案

但我就想用Vue3我就这么固执那怎么办呢

明哥找到一种方法它叫element-plus它对Vue3进行了支持。

  1. 创建Vue3项目
    参考此前文章环境的搭建与运行第一个Vue实例
  2. 将项目导入到IDEA并运行
    参考此前文章Vue项目代码导入到IDEA并运行
  3. 在IDEA的终端位置输入以下命令安装element-plus

npm install element-plus --save

  1. 在main.js注册element-plus
    注意这里与Vue2的注册有些不一样比如

const app = createApp(App);
先创建app 在用 use

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

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);

app.mount('#app')
  1. 启动项目打开主页

可以看到项目是没有报错的

在这里插入图片描述

导航

✪  Vue开发实例目录总索引
上一篇【05】搭建项目主页面头部、导航、主体等页面布局
下一篇【07】编写头部页面

热门专栏推荐

【1】Java小游戏俄罗斯方块、植物大战僵尸等
【2】JavaWeb项目实战图书管理、宿舍管理等
【3】JavaScript精彩实例飞机大战、验证码等
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: vue