vue3引入element-plus报错解决方案

起因

最近，尤雨溪宣布vue3将在2022年2月7号成为新的默认版本！对于我这个老写vue2的人来说，着实想去体验一下vue3。于是乎，我复习了一下vue3的知识，并用传统vue-cli方式建了一个vue3的项目，既然是写vue3，当然得试试vue3的组件库了，然后我就选择了大名鼎鼎的element-ui，vue3版的element-ui已经改叫element-plus了。但是，我按照官方文档做法安装、引入，却报错了。

这是新建好的项目结构，跟vue2没什么区别

然后我试了下引入完整版的方法，毕竟只是学习用，不是真正的企业项目开发，依照三步安装、引入、运行。

npm install element-plus --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

npm run serve

然后就报错了

说啥缺少什么loader，我英语也不太好，后来我就去上网查报错的原因，有的博客说新版的element-plus要用vue add element-plus才行。但我就想用npm方式去安装，弄了一个晚上，终于研究明白了。

解决方法

其实很简单，就是降低一下element-plus的版本，我们不指定版本它默认会安装最新的版本，我们可以降一下版本，然后说一下我的vue-cli版本 4.5.13。

我们去看一下element-plusnpm版本页面

我们就挑一个最近下载量比较高的版本1.3.0-beta.5,更新一下即可。

npm install element-plus@1.3.0-beta.5 --save

然后我们就成功了。

当然我们也可以试一下另一种解决方案，这个作者也没试过，看别人是可以成功的，有想用这个的，可以自己去试一试。

vue add element-plus

最后

如果本篇文章对你有帮助，麻烦点个赞，谢谢。