vue引入elementui报错

1.一开始下载的是node.js最新版本，附带的npm是8.x版本，安装便会报错

npm 7以上的版本都会产生多依赖树的问题，解决问题就是降级卸载当前的7以上的npm，使用旧版的6的npm

对于7以上的npm如果无法卸载，直接以mac的管理员权限sudo npm install -g npm@6.14.15来做

或者去node.js下载包含6版本npm的node安装包

再次安装：进入项目的根目录执行

npm i element-ui -S

此时安装成功

2.安装成功后，前端项目中package.json会自动注册

按照vue官网教程在main.js中引入element

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

启动项目后，浏览localhost:8080发现页面为空，没有内容，或者报错

看官方文档发现vue3已经不支持原来的饿了么ui了需要使用与vue3适配的Element-plus

官网说明 :https://element-plus.gitee.io/#/zh-CN/component/installation

这次是得注意安装 element-plus

进入前端项目目录，执行：

npm install element-plus --save

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