之前一直採用VS進行各種前端後端的開發，隨著專案的需要，正逐步融合純前端的開發模式，開始主要選型為Vue + Element 進行BS前端的開發，後續會進一步整合Vue + AntDesign的介面套件，作為兩種不同介面框架的展現方式。採用Vue + Element 的前端開發和之前的開發模式需要有較大的轉變，以及需要接觸更多的相關知識，本系列隨筆基於循序漸進的學習研究方式，對使用Vue + Element 這種前端開發的各個方面進行一個完整的介紹，並結合我對BS前端已有的框架功能，進行兩者的融合。本篇隨筆主要介紹開發環境的準備工作，包括需要準備好相關的開發工具，外掛輔助等，以及對開發儲存的自動修正處理，除錯的配置的內容等。

1、開發所需的軟體環境

有別於之前的Asp.net的開發，純前端的開發，一般不會再採用笨重的VS進行前端的開發，而改用VS Code或者WebStorm等輕型的開發工具來進行前端程式碼的開發和維護，雖然是輕型開發工具，不過功能也是非常強大的，而且開發環境可以在Windows系統，也可以在Mac系統等，實現多平臺的開發環境。

1）VS code的安裝

VS Code（Visual Studio Code）是由微軟研發的一款免費、開源的跨平臺文字（程式碼）編輯器。幾乎完美的編輯器。

官網：https://code.visualstudio.com

文件：https://code.visualstudio.com/docs

原始碼：https://github.com/Microsoft/vscode

VS Code的介面大概如下所示，一般安裝後，如果為英文介面，則安裝它的中文包即可。

VS Code安裝後，我們一般還需要搜尋安裝一些所需要的外掛輔助開發。安裝外掛很簡單，在搜尋面板中查詢到後，直接安裝即可。

 一般我們需要安裝這些vs code 外掛:

Vetur  

Vue多功能整合外掛，包括：語法高亮，智慧提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue外掛，Vue開發者必備。

ESLint 

ESLint 是一個語法規則和程式碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的程式碼。

而 VSCode 中的 ESLint 外掛就直接將 ESLint 的功能整合好，安裝後即可使用，對於程式碼格式與規範的細節還可以自定義，並且一個團隊可以共享同一個配置檔案，這樣一個團隊所有人寫出的程式碼就可以使用同一個程式碼規範，在程式碼簽入前每個人可以完成自己的程式碼規範檢查。

VS Code - Debugger for Chrome  結合Chrome進行除錯的外掛

此工具簡直就是前端開發必備，將大大地改變你的開發與除錯模式。

以往的前端除錯，主要是 JavaScript 除錯，你需要在 Chrome 的控制檯中找到對應程式碼的部分，新增上斷點，然後在 Chrome 的控制檯中單步除錯並在其中檢視值的變化。

而在使用了 Debugger for Chrome 後，當代碼在 Chrome 中執行後，你可以直接在 VSCode 中加上斷點，點選執行後，Chrome 中的頁面繼續執行，執行到你在 VSCode 中新增的斷點後，你可以直接在 VSCode 中進行單步除錯。

Beautify

Beautify 外掛可以快速格式化你的程式碼格式，讓你在編寫程式碼時雜亂的程式碼結構瞬間變得非常規整，程式碼強迫症必備，較好的程式碼格式在後期維護以及他人閱讀時都會有很多的便利。

2) 安裝node開發環境

利用VS Code開發，我們很多時候，需要使用命令列npm進行相關模組的安裝，這些需要node環境的支援，安裝好node後，npm也就一起安裝好了。

node 下載：https://nodejs.org/en/

安裝後，我們可以通過命令列或者VS Code 裡面的Shell 進行檢視node 和npm 的版本號了

node -v

npm -v

3）vue腳手架的安裝

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。

全域性安裝：npm install vue-cli -g （全域性解除安裝：npm uninstall vue-cli -g）

4）Vue DevTool Chrome外掛的安裝

這個外掛也是開發Vue必備的Chrome外掛，一般沒有外網，不能直接在Chrome的外掛官網上進行安裝，而通過GitHub下載進行編譯在安裝又顯得太過麻煩，後來在一個網站上下載安裝成功。

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2、開發環境的配置使用

對於 Vetur 等程式碼自動修正處理，我們需要在VS Code裡面進行設定好，在【檔案】【首選項】【設定】中，然後單擊Settings.json進行編輯即可。

我這裡主要設定儲存程式碼後能夠對程式碼進行縮排排版的常規的處理

除錯環境的處理，為了結合Chrome除錯VScode，我們需要安裝外掛Debugger for Chrome ，然後進行Vue專案程式碼的設定處理即可。

開啟專案根目錄的Vue.Config.js檔案，在合適的位置，加入 productionSourceMap: true 以及 devtool: 'source-map'  如下所示

然後再在執行面板裡面，進行除錯引數設定的處理，如下所示 

 指定這些設定後，我們就可以以除錯模式進行除錯VS Code裡面的程式碼了，程式碼只需要設定對應的斷點即可跟蹤物件的資料。

除錯前，記得先使用npm run dev 啟動專案，專案完全啟動後會在Chrome瀏覽器開啟專案地址，再使用F5進行專案程式碼的除錯。

Vue DevTools也是用來跟蹤Vue專案路由、狀態等資訊的，可以資訊很好的跟蹤處理。

為了點亮Chrome瀏覽器上面Vue DevTools圖示，我們可以在Vue專案的main.js裡面加入一行程式碼。

 這篇隨筆作為一個簡單的開篇，主要介紹VS Code環境的安裝，以及對應外掛的配置，並聯合Chrome如何實現專案程式碼的除錯處理。