vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
先說一下我碰到的問題
- 錯誤1:Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
- 錯誤2:unknown option – skipGetStart
正文
安裝腳手架
npm install -g @vue/cli
通過vue -V查看版本發(fā)現(xiàn)安裝的是最新版v4.5.6,然后通過命令行和圖形化界面的方式創(chuàng)建vue項(xiàng)目都沒有問題
成功顯示如下界面
然后開始使用element-ui。
在終端輸入npm i element-ui –S
命令安裝依賴包,然后在main.js中導(dǎo)入Element-UI 相關(guān)資源:
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
接下來測試elementUI組件能不能正常使用~
在App.vue中插入element組件后,輸入npm run serve
啟動服務(wù),終端顯示編譯成功,但是瀏覽器頁面一片空白,打開調(diào)試工具發(fā)現(xiàn)報錯了!錯誤提示說Vue沒有定義。
找到main.js發(fā)現(xiàn)它跟 vue-cli@3 版本下不一樣?。?!
vue/cli4.5.6版本下
vue-cli@3 版本下
猜測報錯原因是因?yàn)檫@兩個版本下的實(shí)例對象不一樣,然后我嘗試把main.js改成vue-cli@3 版本下的樣子,果然事情沒這么簡單,又報錯了哈哈~
錯誤信息如下:
Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
網(wǎng)上查了之后發(fā)現(xiàn)有2種解決辦法:
方法一:
1、卸載原先的版本
npm uninstall -g @vue/cli
2、安裝支持import Vue from 'vue’的版本
npm install -g @vue/cli@3.x
方法二:
用v4.5.6版本的Vue腳手架創(chuàng)建項(xiàng)目時選擇2.x的Vue.js版本。
我用的第一種方法,安裝了vue/cli@3.0.4通過命令行重新創(chuàng)建項(xiàng)目后成功地使用了element組件。
通過命令行方式創(chuàng)建項(xiàng)目成功使用elementUI后,我又開始嘗試使用圖形化界面創(chuàng)建項(xiàng)目使用elementUI。
但沒想到創(chuàng)建項(xiàng)目就報錯了,報錯信息如下:
百度后發(fā)現(xiàn),原來--skipGetStarted
命令是vue/cli@3.6.0+之后增加的,也就是說低于v3.6.0的版本識別不了?。?!
于是,為了長遠(yuǎn)考慮,我又重新安裝了vue/cli@3.6.0版本…
接下來的操作就很順暢的完成啦!
綜上:要使用GUI方式創(chuàng)建項(xiàng)目并使用Element-UI組件庫,保險起見,還是安裝v3.6.0版本的腳手架吧。
npm install -g @vue/cli@3.6.0
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuex實(shí)現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法
下面小編就為大家分享一篇vuex實(shí)現(xiàn)登錄狀態(tài)的存儲,未登錄狀態(tài)不允許瀏覽的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù)的方法處理
這篇文章主要介紹了vue3使用vueup/vue-quill富文本、并限制輸入字?jǐn)?shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03vue中使用heatmapjs的示例代碼(結(jié)合百度地圖)
這篇文章主要介紹了vue中使用heatmapjs的示例代碼(結(jié)合百度地圖),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09如何實(shí)現(xiàn)echarts markline標(biāo)簽名顯示自己想要的
這篇文章主要介紹了實(shí)現(xiàn)echarts markline標(biāo)簽名顯示自己想要的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問題
這篇文章主要介紹了postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07