之前一直采用VS進(jìn)行各種前端后端的開(kāi)發(fā)，隨著項(xiàng)目的需要趟咆，正逐步融合純前端的開(kāi)發(fā)模式添瓷，開(kāi)始主要選型為Vue + Element 進(jìn)行BS前端的開(kāi)發(fā)，后續(xù)會(huì)進(jìn)一步整合Vue + AntDesign的界面套件值纱，作為兩種不同界面框架的展現(xiàn)方式鳞贷。采用Vue + Element 的前端開(kāi)發(fā)和之前的開(kāi)發(fā)模式需要有較大的轉(zhuǎn)變，以及需要接觸更多的相關(guān)知識(shí)虐唠，本系列隨筆基于循序漸進(jìn)的學(xué)習(xí)研究方式搀愧，對(duì)使用Vue + Element 這種前端開(kāi)發(fā)的各個(gè)方面進(jìn)行一個(gè)完整的介紹，并結(jié)合我對(duì)BS前端已有的框架功能疆偿，進(jìn)行兩者的融合咱筛。本篇隨筆主要介紹開(kāi)發(fā)環(huán)境的準(zhǔn)備工作，包括需要準(zhǔn)備好相關(guān)的開(kāi)發(fā)工具杆故，插件輔助等迅箩，以及對(duì)開(kāi)發(fā)保存的自動(dòng)修正處理，調(diào)試的配置的內(nèi)容等处铛。
1饲趋、開(kāi)發(fā)所需的軟件環(huán)境
有別于之前的Asp.net的開(kāi)發(fā)拐揭，純前端的開(kāi)發(fā)，一般不會(huì)再采用笨重的VS進(jìn)行前端的開(kāi)發(fā)奕塑，而改用VS Code或者WebStorm等輕型的開(kāi)發(fā)工具來(lái)進(jìn)行前端代碼的開(kāi)發(fā)和維護(hù)堂污，雖然是輕型開(kāi)發(fā)工具，不過(guò)功能也是非常強(qiáng)大的龄砰，而且開(kāi)發(fā)環(huán)境可以在Windows系統(tǒng)盟猖，也可以在Mac系統(tǒng)等，實(shí)現(xiàn)多平臺(tái)的開(kāi)發(fā)環(huán)境换棚。
1）VS code的安裝
VS Code（Visual Studio Code）是由微軟研發(fā)的一款免費(fèi)扒披、開(kāi)源的跨平臺(tái)文本（代碼）編輯器。幾乎完美的編輯器圃泡。
官網(wǎng)：https://code.visualstudio.com
文檔：https://code.visualstudio.com/docs
源碼：https://github.com/Microsoft/vscode
VS Code的界面大概如下所示，一般安裝后愿险，如果為英文界面颇蜡，則安裝它的中文包即可。
VS Code安裝后辆亏，我們一般還需要搜索安裝一些所需要的插件輔助開(kāi)發(fā)风秤。安裝插件很簡(jiǎn)單，在搜索面板中查找到后扮叨，直接安裝即可缤弦。
一般我們需要安裝這些vs code 插件:
**Vetur **
Vue多功能集成插件，包括：語(yǔ)法高亮彻磁，智能提示碍沐，emmet，錯(cuò)誤提示衷蜓，格式化累提，自動(dòng)補(bǔ)全，debugger磁浇。vscode官方欽定Vue插件斋陪，Vue開(kāi)發(fā)者必備。
**ESLint **
ESLint 是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具置吓，可以用來(lái)保證寫出語(yǔ)法正確无虚、風(fēng)格統(tǒng)一的代碼。
而 VSCode 中的 ESLint 插件就直接將 ESLint 的功能集成好衍锚，安裝后即可使用友题，對(duì)于代碼格式與規(guī)范的細(xì)節(jié)還可以自定義，并且一個(gè)團(tuán)隊(duì)可以共享同一個(gè)配置文件构拳，這樣一個(gè)團(tuán)隊(duì)所有人寫出的代碼就可以使用同一個(gè)代碼規(guī)范咆爽，在代碼簽入前每個(gè)人可以完成自己的代碼規(guī)范檢查梁棠。
VS Code - Debugger for Chrome 結(jié)合Chrome進(jìn)行調(diào)試的插件
此工具簡(jiǎn)直就是前端開(kāi)發(fā)必備，將大大地改變你的開(kāi)發(fā)與調(diào)試模式斗埂。
以往的前端調(diào)試符糊，主要是 JavaScript 調(diào)試，你需要在 Chrome 的控制臺(tái)中找到對(duì)應(yīng)代碼的部分呛凶，添加上斷點(diǎn)男娄，然后在 Chrome 的控制臺(tái)中單步調(diào)試并在其中查看值的變化。
而在使用了 Debugger for Chrome 后漾稀，當(dāng)代碼在 Chrome 中運(yùn)行后模闲，你可以直接在 VSCode 中加上斷點(diǎn)，點(diǎn)擊運(yùn)行后崭捍，Chrome 中的頁(yè)面繼續(xù)運(yùn)行尸折，執(zhí)行到你在 VSCode 中添加的斷點(diǎn)后，你可以直接在 VSCode 中進(jìn)行單步調(diào)試殷蛇。
Beautify
Beautify 插件可以快速格式化你的代碼格式实夹，讓你在編寫代碼時(shí)雜亂的代碼結(jié)構(gòu)瞬間變得非常規(guī)整，代碼強(qiáng)迫癥必備粒梦，較好的代碼格式在后期維護(hù)以及他人閱讀時(shí)都會(huì)有很多的便利亮航。
- 安裝node開(kāi)發(fā)環(huán)境
利用VS Code開(kāi)發(fā)，我們很多時(shí)候匀们，需要使用命令行npm進(jìn)行相關(guān)模塊的安裝缴淋，這些需要node環(huán)境的支持，安裝好node后泄朴，npm也就一起安裝好了重抖。
node 下載：https://nodejs.org/en/
安裝后，我們可以通過(guò)命令行或者VS Code 里面的Shell 進(jìn)行查看node 和npm 的版本號(hào)了
node -v
npm -v
3）vue腳手架的安裝
Vue (讀音 /vju?/叼旋，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架仇哆。
全局安裝：npm install vue-cli -g （全局卸載：npm uninstall vue-cli -g）
4）Vue DevTool Chrome插件的安裝
這個(gè)插件也是開(kāi)發(fā)Vue必備的Chrome插件，一般沒(méi)有外網(wǎng)夫植，不能直接在Chrome的插件官網(wǎng)上進(jìn)行安裝讹剔，而通過(guò)GitHub下載進(jìn)行編譯在安裝又顯得太過(guò)麻煩，后來(lái)在一個(gè)網(wǎng)站上下載安裝成功详民。
https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd
2延欠、開(kāi)發(fā)環(huán)境的配置使用
對(duì)于 **Vetur **等代碼自動(dòng)修正處理，我們需要在VS Code里面進(jìn)行設(shè)置好沈跨，在【文件】【首選項(xiàng)】【設(shè)置】中由捎，然后單擊Settings.json進(jìn)行編輯即可。
我這里主要設(shè)置保存代碼后能夠?qū)Υa進(jìn)行縮進(jìn)排版的常規(guī)的處理
調(diào)試環(huán)境的處理饿凛，為了結(jié)合Chrome調(diào)試VScode狞玛，我們需要安裝插件Debugger for Chrome 软驰，然后進(jìn)行Vue項(xiàng)目代碼的設(shè)置處理即可。
打開(kāi)項(xiàng)目根目錄的Vue.Config.js文件心肪，在合適的位置锭亏，加入 productionSourceMap: true 以及 devtool: 'source-map' 如下所示
然后再在運(yùn)行面板里面，進(jìn)行調(diào)試參數(shù)設(shè)置的處理硬鞍，如下所示
指定這些設(shè)置后慧瘤，我們就可以以調(diào)試模式進(jìn)行調(diào)試VS Code里面的代碼了，代碼只需要設(shè)置對(duì)應(yīng)的斷點(diǎn)即可跟蹤對(duì)象的數(shù)據(jù)固该。
調(diào)試前锅减，記得先使用npm run dev 啟動(dòng)項(xiàng)目，項(xiàng)目完全啟動(dòng)后會(huì)在Chrome瀏覽器打開(kāi)項(xiàng)目地址伐坏，再使用F5進(jìn)行項(xiàng)目代碼的調(diào)試怔匣。
Vue DevTools也是用來(lái)跟蹤Vue項(xiàng)目路由、狀態(tài)等信息的桦沉，可以信息很好的跟蹤處理劫狠。
為了點(diǎn)亮Chrome瀏覽器上面Vue DevTools圖標(biāo)，我們可以在Vue項(xiàng)目的main.js里面加入一行代碼永部。
Vue.config.devtools = process.env.NODE_ENV === 'development'
如下界面所示
這篇隨筆作為一個(gè)簡(jiǎn)單的開(kāi)篇，主要介紹VS Code環(huán)境的安裝呐矾，以及對(duì)應(yīng)插件的配置苔埋，并聯(lián)合Chrome如何實(shí)現(xiàn)項(xiàng)目代碼的調(diào)試處理。
為了方便讀者理解蜒犯，我列出一下前面幾篇隨筆的連接组橄，供參考：
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(1）--- 開(kāi)發(fā)環(huán)境的準(zhǔn)備工作
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(2）--- Vuex中的API、Store和View的使用
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(3）--- 動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(4）--- 獲取后端數(shù)據(jù)及產(chǎn)品信息頁(yè)面的處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(5）--- 表格列表頁(yè)面的查詢罚随，列表展示和字段轉(zhuǎn)義處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(6）--- 常規(guī)Element 界面組件的使用
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(7）--- 介紹一些常規(guī)的JS處理函數(shù)
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(8）--- 樹(shù)列表組件的使用
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(9）--- 界面語(yǔ)言國(guó)際化的處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(10）--- 基于vue-echarts處理各種圖表展示
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(11）--- 圖標(biāo)的維護(hù)和使用
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(12）--- 整合ABP框架的前端登錄處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(13）--- 前端API接口的封裝處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(14）--- 根據(jù)ABP后端接口實(shí)現(xiàn)前端界面展示
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(15）--- 用戶管理模塊的處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(16）--- 組織機(jī)構(gòu)和角色管理模塊的處理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(17）--- 菜單管理
循序漸進(jìn)VUE+Element 前端應(yīng)用開(kāi)發(fā)(18）--- 功能點(diǎn)管理及權(quán)限控制
