循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業

之前一直采用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如何實作專案代碼的除錯處理，

為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：

循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用

循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示 

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示

循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理 

循序漸進VUE+Element 前端應用開發(17）--- 選單管理

循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制  

標籤：Html/Css

上一篇：React-class組件生命周期

下一篇：1.html5概述