vue腳手架安裝以及安裝失敗問題解決辦法

Posted on by

前言

在不少小夥伴學習使用vue的過程中，vue 的腳手架安裝幾乎是無可避免的；但是因為電腦配置、網絡等等的問題會造成部分小夥伴的腳手架安裝失敗。

那我們本著遇到問題解決問題，沒有問題創造問題的態度進行本期的問題解決。若發現文中有部分內容比較基礎請酌情跳過，在剛開始學習的路上，總是有很多小白寶們不太懂，我也是這樣過來的，希望這樣能夠友好一點，你們也要加油哦，前端路上，我們不再孤單

一、腳手架的命令安裝

此處默認寶們已經完成node.js前期安裝工作，若還未安裝node.js的寶們請先直接跳到最後按照教程進行安裝，然後再返回安裝腳手架

1.1 命令查看版本信息

在通過安裝node、npm等之後，我們通過命令行查看可以知道我們所安裝的相關版本號，該過程沒有問題我們繼續進行腳手架的安裝

node -v
npm -v
//命令可在powershell、cmd、IDE終端窗口中運行(使用時請選擇復制)

1.2 通過鍵入命令安裝腳手架

傳統安裝命令（不建議）

安裝Vue2腳手架
npm install -g vue-cli
卸載Vue2腳手架
npm uninstall vue-cli -g

輸入命令回車後便開始npm包的安裝，因為npm服務器在國外，所以此處因為網絡可能會出現第一個問題，即網絡因素無法安裝報錯或長時間無反應，所以傳統安裝方式介於響應速度，不太建議。

反正這裡我是裝瞭好幾個小時都沒好，寶們自己選擇喲

切換鏡像源（建議使用）

查看當前使用的鏡像源
npm config get registry

切換鏡像源
切換至淘寶源：npm config set registry=http://registry.npm.taobao.org/
切換至華為源：npm config set registry=https://mirrors.huaweicloud.com/repository/npm/
切換至npm源：​​​​​​​npm config set registry=http://registry.npmjs.org
臨時使用：npm --registry https://registry.npm.taobao.org install express

此處我們默認使用淘寶源

//查看是否安裝成功
cnpm -v

用cnpm安裝vue腳手架

//安裝Vue2腳手架
cnpm install -g vue-cli

j檢查腳手架安裝情況

vue -V
//記住這裡的-V是大寫字母V

註意：

如果提示“無法識別”，有可能是npm的版本過低，更新npm包就可以瞭，然後繼續上一步驟 npm安裝腳手架就行

//更新一下版本就好瞭
npm install -g npm

如果安裝失敗的話，可能會出現以下報錯

清除緩存重新安裝即可

npm cache clean

二、node.js環境安裝

首先進入node.js的官方網站，我們此處進入node.js中文網

或者直接進入node官網點擊下載即可（一般系統會自動匹配相應的包，若下載後發現下載的包不對應系統則手動點擊下載）

下載完成後雙擊開始安裝，此處註意，在同意相關協議後最好使用默認安裝路徑，這樣也能夠盡可能地避免你後期使用過程中因為路徑更改造成的一系列不必要的問題。

安裝完成後回到文章頂部按照步驟安裝腳手架即可。

聽我一句勸，node就讓他默認路徑安裝吧，不然你以後很有可能會找各種報錯的原因

附：vue安裝vue腳手架（vue-cli)錯誤總結

最忌重新安裝vue-cli腳手架的時候，報出如下錯誤

根據提示將相應的文件夾刪除之後，又讓我刪除新的文件。我突然猜想這是我第二次安裝可能需要將裡面所有的vue文件刪除，所以我就將所有的vue文件刪除瞭，果然安裝就成功瞭。

總結

在通過一些列的環境安裝後，我們就進入到下一階段的項目創建，開始著手你的vue項目瞭，不過在這裡還是先囉嗦一下，如果你之前沒有正式學習過 Node.js和JavaScript建議先簡單瞭解一下，對後面vue的學習會起一定的幫助

到此這篇關於vue腳手架安裝以及安裝失敗問題解決辦法的文章就介紹到這瞭,更多相關vue腳手架安裝內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：