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

　　

在前端app.vue中写入element样式的按钮代码，再次访问localhost:8080,页面正常显示