VSCode配置Vue項目


假設Vscode、nodejs已經安裝好了

Vscode的前端配件推薦大家搜一下已經有很多整理好的啦
如果在cmd窗口運行 node -xxx 命令,提示 'node' 不是內部或外部命令,也不是可運行的程序或批處理文件,說明環境變量沒有配置正確,可以參考這篇

開始配置

打開VScode的終端,調出命令輸入框。
先安裝vue-cli,輸入以下命令后回車,等待安裝完成。有可能會出現安裝失敗的問題多試幾次應該ok的

npm install -g vue-cli

再安裝webpack,一個打包js的工具,和剛剛一樣輸入以下命令后回車等待安裝完成

npm install -g webpack 

配置完成,創建項目

命令如下:
創建項目命令:

vue init webpack xxx

這個xxx是項目名稱,改成自己的項目名稱就行
接着會出現一些配置項,根據需要進行配置,也可以直接按回車使用默認配置
然后繼續等待安裝完成之后,一個基本的vue項目就自動搭建完了,可以看文件目錄開始后面啦,其中main.js就是入口

運行調試

html和vue在VSCode中是不能直接點擊小三角運行

html

html要下載open in browser插件,然后使用插件打開(快捷鍵:Alt + B使用默認瀏覽器打開,可以在setting里設置,Shift + Alt + B是選擇瀏覽器打開)

vue

先cd到項目文件夾(xxx就是剛剛上面自己取的項目名稱)

cd xxx

然后運行以下命令

npm run dev

成功以后會顯示,然后ctrl+點擊鏈接或者自己復制鏈接到瀏覽器就可以打開了


免責聲明!

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



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