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,頁面正常顯示