【踩坑记录：vue3的项目安装element-ui失败报错，解决方案】_安装elment时vue3出错

项目场景：

学习前端vue3项目，安装element-ui样式模板

---

问题描述

项目根目录安装element-ui执行命令：

npm i element-ui -S
1

报错：

---

原因分析：

归根结底还是：版本冲突！

c知道给的建议：

解决这个问题的方法有几种：
1、更新element-ui版本：如果element-ui已经发布了兼容vue@3.x版本的新版本，可以尝试将element-ui更新到最新版本，以解决依赖冲突。
2、降低vue版本：如果项目中使用的vue版本可以降低到2.x系列，可以尝试将vue版本降低到与element-ui兼容的版本。
3、使用–force或–legacy-peer-deps选项：在运行npm install命令时，可以尝试添加–force或–legacy-peer-deps选项，强制接受不完全匹配的依赖解析结果。但是这种方法可能会导致依赖关系不完整或不稳定，因此需要谨慎使用。
（请注意，在尝试上述解决方法之前，建议先备份项目文件，以防止出现意外情况。）

针对第一个建议，搜索学习了一下

注意！！！

目前element-ui只支持Vue2.6以下的版本，如果想在Vue3.0使用这个组件库，就要使用element-plus

官网：
element-plus版本说明

---

解决方案：

终端项目根目录：

npm install element-plus --save
1

并且更新main.js：

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')

1
2
3
4
5
6
7
8
9
10

小拓展：
main.js的相关写法：main.js写法和含义

---

说明

如果文中有疑问的欢迎讨论、指正（抱拳），互相学习，感谢关注。