VSCode搭建Vue專案

2022-01-24 23:44:19 字數 1255 閱讀 5447

在vscode上搭建乙個vue專案---初學總結。

1.假設vscode、nodejs等已經安裝好了。

2.全域性安裝vue-cli,vue-cli可以幫助我們快速構建vue專案。

安裝命令:

npm install -g vue-cli
開啟vscode的終端,調出命令輸入框。點選終端-新建終端,輸入上述命令,回車,等待安裝完成。

3.安裝webpack,它是打包js的工具

安裝命令:

npm install -g webpack
安裝方法同上。

4.安裝完成之後就可以開始建立vue專案,首先建立乙個資料夾用來存放你的專案,用vscode開啟對應的資料夾,並在終端cd到對應的資料夾。比如我的資料夾就是myvue

建立專案命令,輸入回車:

vue init webpack myvue
其中myvue就是專案名稱,根據喜好自己取。

接著會出現一些配置項,可以根據需要配置,也可以預設,直接按回車。

然後繼續等待安裝依賴項。完成之後,乙個基本的 vue專案就搭建完了。完成之後的vscode左邊可以看到如下目錄,其中main.js就是入口。

5.接著執行專案,先cd到專案資料夾,cd myvue,然後輸入以下指令

成功之後,接著在瀏覽器裡輸入:http://localhost:8080,看到如下畫面就是成功了。

6.專案打包發布上線

輸入命令:

npm run build
完成之後,專案資料夾中會出現乙個dist資料夾,裡面就是打包之後的內容,直接部署就好了。

VSCode搭建Vue專案

1.假設vscode nodejs等已經安裝好了。2.全域性安裝vue cli,vue cli可以幫助我們快速構建vue專案。安裝命令 npm install g vue cli 3.安裝webpack,它是打包js的工具 安裝命令 4.安裝完成之後就可以開始建立vue專案,首先建立乙個資料夾用來存...

vscode除錯vue專案

vscode如何除錯vue專案,通過f5進行斷點除錯,類似與vs進行除錯,vscode需要安裝外掛程式以及配置launch.json檔案。步驟一 1.找到 擴充套件 或者按快捷鍵 ctrl shift x 如下圖,輸入debugger for chrome查詢,並安裝。2.專案裡建立 launch....

vscode除錯vue專案

針對乙個剛上手的專案斷點除錯是不能少的,之前對於vue專案一直使用的是devtools,昨天完成了通過vscode對vue專案的斷點除錯今天記錄一下,chrome firefox同理所以只記錄乙個 準備 官網除錯講解 vscode 版本 版本 1.50.1 user setup 需要外掛程式 deb...