一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。

过程

最近想体验下最新的vue3和element-plus，于是先用vue-cli先安装了vue3，这个过程跟之前安装vue2的过程类似。

我选择的手动，因为我想自定义去选择模块

然后我把 babel，router，vuex css预处理器，代码校验都选了，我这里没有选TypeScript

接着选vue的版本

然后确认路由要不要选history模式，css预处理器的版本，代码校验的方式，是否把这些配置独立成文件，等等。

装好之后，继续安装element-plus

yarn add element-plus

然后在main.js中引入element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 全局引入ElementPlus
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

接着运行

yarn run serve

天真的我在等项目跑起来然后使用element-plus的组件，但是没想到，终端显示报错了。。。

看错误信息，Unexpected token, 需要loader才行？？？我以为是不是我安装的js版本，不是ts版本，导致的这个报错。

于是我又重新创建一个ts版本

会让你选择是否使用class创建组件的方式，类似react,比如class Home extends Vue { },我选是。

会让你选择是否用babel配合typescript转码，我选是。

但是跑起来结果还是一样的，报错。那就是跟ts，js版本无关。需要什么loader呢？

思索无关，我先去谷歌下（百度），折腾了一会。尝试了都没有用。

没办法，接着去github上面看看，果然有发现。 链接在这里

原来是popperjs的问题。

组件库开发者提示他刚刚更新了它的依赖。

所以我们只需要重新删除element-plus,然后再重新安装就没问题了。或者你也可以只把@sxzz/popperjs-es的依赖更新到2.11.7这个版本。

接着就可以跑起来了。

总结

这个问题到现在就算解决了。这个问题我感觉还是有点严重的，因为使用饿了么组件库的开发者还是很多的，会影响到开发者的使用，所以我们平时写代码严谨再严谨，尽量把各个情况考虑到，测试到。