背景
大家都知道饿了么开源了两套Vue的UI组件,Mint UI 移动端的,Element UI PC端的。我使用的是最新的Vue3.0,照着Element的文档引入,结果页面出现白版,F12打开开发者工具一片飘红,一顿操作。原来是从Vue3.0不支持Element UI,而是改成了Element Plus。又经过一顿操作,页面出来了,心情瞬间大好。下面请看具体过程。
引入Element UI
引入命令
- 命令引入参照官方文档:element.eleme.cn/#/zh-CN/com…
- npm i element-ui -S
- main.js中引入
import Element from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(Element)
页面报错:Cannot read property 'prototype' of undefined
引入Element Plus
引入命令
- 命令参考官方文档:element-plus.gitee.io/#/zh-CN/com…
- npm install element-plus --save
- main.js中引入
import { createApp } from "vue"; import Element from "element-plus"; import "element-plus/lib/theme-chalk/index.css"; createApp(App) .use(Element) .mount("#app");
- 此时再次启动项目就能够正常显示了。
总结
- 我觉得Vue官网上应该在一个醒目的位置上做出说明,这样学习的小伙伴跳坑的几率会降低,这里小批评一下。
- Element团队,应该做一个向下兼容。这样也能降低跳坑的几率。也许是做兼容改动比较大。
- 这种大跳跃,前后完全不一样在业内也是一种常见现象,习惯就好。
- 希望能帮助到跳坑的小伙伴。
- 如果帮助到你了,可以加关注,点赞,收藏,评论。