在使用vscode開發(fā)Vue項(xiàng)目的過(guò)程中，經(jīng)常會(huì)使用各種路徑，當(dāng)你想找到src目錄下的某個(gè)文件的時(shí)候，通常會(huì)用進(jìn)行定位，通過(guò)配置@路徑提示后，@就代表是src目錄下了，使用起來(lái)非常方便具體配置如下安裝插件Path Intelli。

可以看到，在 indexjs 文件中包含服務(wù)器 host 和 port 以及入口文件的相關(guān)配置，默認(rèn)啟動(dòng)端口是 8080 ，這里可以進(jìn)行修改indexhtml 的內(nèi)容很簡(jiǎn)單，主要是提供一個(gè) div 給 vue 掛載mainjs 中， 引入了。

那么你可能需要在開發(fā)環(huán)境中配置 webpack 來(lái)處理 source map，這樣就能在控制臺(tái)中看到更為詳細(xì)的輸出信息不過(guò)，通常來(lái)說(shuō)，在 Vue 項(xiàng)目中使用 consolelog 輸出內(nèi)容是非常簡(jiǎn)單的，不需要進(jìn)行任何配置。

需要配置以下的所有命令例如需要用到vue文件需要先安裝vueloadervuestyleloader等加載器并做配置要使用es6語(yǔ)法，需要安裝babel和babelloader等加載器注意一條都不能配置漏，不然出現(xiàn)報(bào)錯(cuò)可能影響往后的運(yùn)行與配置。

確保你已經(jīng)安裝了Vetur插件這是一個(gè)很受歡迎的Vue開發(fā)插件，可以支持Vue語(yǔ)法高亮智能提示代碼補(bǔ)全等功能在VSCode中，點(diǎn)擊左側(cè)的插件圖標(biāo)，搜索“Vetur”，然后安裝它如果你已經(jīng)安裝了其他的Vue插件，請(qǐng)嘗試禁用它們。

最近在配置vscode debugger，使用vscode調(diào)試vue頁(yè)面項(xiàng)目是jhipster搭的，前端部分目錄結(jié)構(gòu)大致如下在配置vscode debugger時(shí)遇到了一些問(wèn)題最后我的launchjson部分內(nèi)容如下到這一步，vscode中的斷點(diǎn)已經(jīng)生效了，當(dāng)進(jìn)入到相應(yīng)。

但是vscode本身只是編輯器，開發(fā)編譯類語(yǔ)言需要自己配編譯環(huán)境，具體我沒(méi)配過(guò)前端開發(fā)不需要配編譯環(huán)境了，只需要把需要的各種庫(kù)工具在命令行界面安裝就行具體過(guò)程網(wǎng)上搜“從零開始搭建vue項(xiàng)目”剛建立好的項(xiàng)目一定是。