先說一下我碰到的問題

• 錯(cuò)誤1：Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
• 錯(cuò)誤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)

接下來測(cè)試elementUI組件能不能正常使用~

在App.vue中插入element組件后，輸入npm run serve啟動(dòng)服務(wù)，終端顯示編譯成功，但是瀏覽器頁面一片空白，打開調(diào)試工具發(fā)現(xiàn)報(bào)錯(cuò)了！錯(cuò)誤提示說Vue沒有定義。

找到main.js發(fā)現(xiàn)它跟 vue-cli@3 版本下不一樣?。?！

vue/cli4.5.6版本下

vue-cli@3 版本下

猜測(cè)報(bào)錯(cuò)原因是因?yàn)檫@兩個(gè)版本下的實(shí)例對(duì)象不一樣，然后我嘗試把main.js改成vue-cli@3 版本下的樣子，果然事情沒這么簡(jiǎn)單，又報(bào)錯(cuò)了哈哈~

錯(cuò)誤信息如下：

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)目時(shí)選擇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)目就報(bào)錯(cuò)了，報(bào)錯(cuò)信息如下：

百度后發(fā)現(xiàn)，原來--skipGetStarted命令是vue/cli@3.6.0+之后增加的，也就是說低于v3.6.0的版本識(shí)別不了?。?！

于是，為了長(zhǎng)遠(yuǎn)考慮，我又重新安裝了vue/cli@3.6.0版本…

接下來的操作就很順暢的完成啦！

綜上：要使用GUI方式創(chuàng)建項(xiàng)目并使用Element-UI組件庫，保險(xiǎn)起見，還是安裝v3.6.0版本的腳手架吧。

npm install -g @vue/cli@3.6.0

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論