vue引入element-ui后界面空白_vue element ui
正文部分
- 配置
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官网
https://element-plus.gitee.io/#/zh-CN/component/quickstart
（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。
耶，又学习到了一个新知识点。
又是一个向阳而生的一天。
じゃね