龙空技术网

vue引入element-ui后界面空白

一边卖豆芽一边敲代码 219

前言:

眼前姐妹们对“vue打包页面空白”都比较着重,你们都需要了解一些“vue打包页面空白”的相关知识。那么小编同时在网摘上收集了一些关于“vue打包页面空白””的相关内容,希望大家能喜欢,咱们一起来了解一下吧!

正文部分配置

vue:3.0

vue-cli:4.5.11

目的

使用element-ui绘制ui界面

原本操作

(1)安装element-ui

npm i element-ui -S

(2)导入element-ui

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
界面空白,报错如下

Uncaught TypeError: Cannot read property 'prototype' of undefined

报错原因:

目前element-ui只支持2.6以下的版本,Vue3.0要使用element-ui就要使用element-plus

官网说法就是为vue-cli@4.5以上提供element-plus

解决方法:

参考element-ui官网

(1)安装element-plus

npm i element-plus

(2)导入element-plus

import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';const Vue = createApp(App)Vue.use(ElementPlus)

这样就解决了!

每日一个面试题

vue的生命周期

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。

组件中的具体方法:beforeCreate created beforeMount mounted beforeUpdate updated

beforeDestroy destroyed

总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

创建前/后:

在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

在created阶段,vue实例的数据对象data有了,$el还没有。

载入前/后:

在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data还未替换。

在mounted阶段,vue实例挂载完成,data成功渲染。

更新前/后:

当data变化时,会触发beforeUpdate和updated方法。

销毁前/后:

beforeDestory是在vue实例销毁前触发,一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后,触发的destroyed。

耶,又学习到了一个新知识点。

又是一个向阳而生的一天。

じゃね

标签: #vue打包页面空白