一文搞定Vue腳手架(vue-cli)的安裝配置、項目創建及常見錯誤解決


下面整個過程中,需要打開cmd的時候,最好都選擇使用管理員身份打開cmd。
一、Vue腳手架(vue-cli)安裝、配置
為了下載速度快一些,這里要配置淘寶鏡像:

npm config set registry https://registry.npm.taobao.org

安裝vue/cli:管理員身份打開cmd,輸入下面的命令:

npm install -g @vue/cli

二、使用vue腳手架創建項目
項目以及項目路徑使用英文名,最好不要包括中文。
進入到項目的目錄下,這里:D:\AVueProject,在該目錄下使用管理員身份打開cmd,創建vue項目,

vue create vue_test

按下enter鍵,中間如果卡住,再按下enter鍵,就可以繼續。根據自己需求選擇使用vue2還是vue3,按鍵盤上的上下鍵進行選擇。

等待一段時間后,出現下面內容,證明創建項目成功

進入到目錄下,找到剛才創建的項目,可以看到里面多了一些東西,如下面圖片所示

繼續在cmd中執行:首先進入到創建的項目中,執行npm run server

cd vue_test
npm run server

過一段時間,出現下圖所示內容

在瀏覽器中打開:http://localhost:8080/, 一切正常的話,就會出現下面的界面。

三、常見問題及解決方案(親測有效)
然而在上述操作過程中,總是會出現一些令人意想不到的問題,這里記錄一下,方便以后學習。
1.在使用vue create vue_test創建項目的時候,出現

ERROR Failed to get response from Error: JAVA_HOME is incorrectly set.
Please update

雖然最后也說成功創建了該項目,但是yarn是什么鬼,可以和上面正常的對比一下,正常的應是npm run serve

而且打開創建的項目,如下圖,里面什么都沒有(可以和上面正常的對比一下),很明顯並沒有創建成功。

開始求助google,度娘,找到以下解決方案,一通操作,終於成功地創建了項目,完活!

解決方案:
①:修改vue 配置問文件 .vuerc,路徑如下:
C:\Users\當前電腦登錄賬戶名.vuerc

②:修改vue 配置問文件 .vuerc
修改配置,把

"packageManager": "yarn"

換成

"packageManager": "npm"


最后記得保存該文件。配置即可生效。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM