手把手学习Vue3.0:Vue3.0正确引入Element UI组件的正确姿势

2,915 阅读1分钟

背景

大家都知道饿了么开源了两套Vue的UI组件,Mint UI 移动端的,Element UI PC端的。我使用的是最新的Vue3.0,照着Element的文档引入,结果页面出现白版,F12打开开发者工具一片飘红,一顿操作。原来是从Vue3.0不支持Element UI,而是改成了Element Plus。又经过一顿操作,页面出来了,心情瞬间大好。下面请看具体过程。

引入Element UI

引入命令

import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(Element)

页面报错:Cannot read property 'prototype' of undefined

引入Element Plus

引入命令

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团队,应该做一个向下兼容。这样也能降低跳坑的几率。也许是做兼容改动比较大。
  • 这种大跳跃,前后完全不一样在业内也是一种常见现象,习惯就好。
  • 希望能帮助到跳坑的小伙伴。
  • 如果帮助到你了,可以加关注,点赞,收藏,评论。