按部就班VUE+Element 前端應用開發(1）--- 開發環境的準備工做

以前一直採用VS進行各類前端後端的開發，隨着項目的須要，正逐步融合純前端的開發模式，開始主要選型爲Vue + Element 進行BS前端的開發，後續會進一步整合Vue + AntDesign的界面套件，做爲兩種不一樣界面框架的展示方式。採用Vue + Element 的前端開發和以前的開發模式須要有較大的轉變，以及須要接觸更多的相關知識，本系列隨筆基於按部就班的學習研究方式，對使用Vue + Element 這種前端開發的各個方面進行一個完整的介紹，並結合我對BS前端已有的框架功能，進行二者的融合。本篇隨筆主要介紹開發環境的準備工做，包括須要準備好相關的開發工具，插件輔助等，以及對開發保存的自動修正處理，調試的配置的內容等。

一、開發所需的軟件環境

有別於以前的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

 

二、開發環境的配置使用

對於 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裏面加入一行代碼。

Vue.config.devtools = process.env.NODE_ENV === 'development'

以下界面所示

 

 

 這篇隨筆做爲一個簡單的開篇，主要介紹VS Code環境的安裝，以及對應插件的配置，並聯合Chrome如何實現項目代碼的調試處理。