vscode下vue安裝除錯

2021-09-19 04:42:34 字數 1213 閱讀 8738

安裝vscode,太簡單不介紹。

安裝node.js(npm命令),也太簡單不介紹。

1、安裝vue

>npm install -g vue-cli
2、檢視vue是否安裝,執行vue命令

>vue
3、檢視模板(不檢視可以略過)

>vue list
4、使用webpack新建vue工程

vue init webpack mydemo
下面是新建專案引數說明(需要注意的是專案的名稱不能大寫,不然會報錯。)project name (my-project) # 專案名稱(我的專案)

project description (a vue.js project) # 專案描述乙個vue.js 專案

author 作者(你的名字)

install vue-router? (y/n) # 是否安裝vue路由,也就是以後是spa(但頁面應用需要的模組)

use eslint to lint your code? (y/n) # 使用 eslint 到你的**? (y [ yes ] / n [ no ])

pick an eslint preset (use arrow keys) # 選擇乙個預置eslint(使用箭頭鍵)

setup unit tests with karma + mocha? (y/n) # 設定單元測karma + mocha? (y/ n)

setup e2e tests with nightwatch? (y/n) # 設定端到端測試,nightwatch? (y/ n)

5、安裝完成後,執行以下命令

>cd mydemo             //進入工程目錄

>npm install //安裝依賴

>npm run dev //啟動程式

>npm install  //安裝依賴

>npm run dev //執行

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...

Vue筆記 使用 VS Code 斷點除錯

直接在 chrome 的除錯視窗中除錯 vue 有諸多不便,好在 visual studio code 中提供了 debugger for chrome 外掛程式,能夠通過配置直接在 vs code 斷點除錯 並且在 vs code 的除錯視窗看到 chrome 中 console 相同的值,這篇文...