概述

之前一直采用VS進行各種前端后端的開發(fā)，隨著項目的需要，正逐步融合純前端的開發(fā)模式，開始主要選型為Vue + Element 進行BS前端的開發(fā)，后續(xù)會進一步整合Vue + AntDesign的界面套件，作為兩種不同界面框架的展現(xiàn)方式。采用Vue + Element 的前端開發(fā)和之前的開發(fā)模式需要有較大的轉(zhuǎn)變，以及需要接觸更多的相關知識，本系列隨筆基于循序漸進的學習研究方式，對使用Vue + Element 這種前端開發(fā)的各個方面進行一個完整的介紹，并結合我對BS前端已有的框架功能，進行兩者的融合。本篇隨筆主要介紹開發(fā)環(huán)境的準備工作，包括需要準備好相關的開發(fā)工具，插件輔助等，以及對開發(fā)保存的自動修正處理，調(diào)試的配置的內(nèi)容等。

1、開發(fā)所需的軟件環(huán)境

有別于之前的Asp.net的開發(fā)，純前端的開發(fā)，一般不會再采用笨重的VS進行前端的開發(fā)，而改用VS Code或者WebStorm等輕型的開發(fā)工具來進行前端代碼的開發(fā)和維護，雖然是輕型開發(fā)工具，不過功能也是非常強大的，而且開發(fā)環(huán)境可以在Windows系統(tǒng)，也可以在Mac系統(tǒng)等，實現(xiàn)多平臺的開發(fā)環(huán)境。

1）VS code的安裝

VS Code（Visual Studio Code）是由微軟研發(fā)的一款免費、開源的跨平臺文本（代碼）編輯器。幾乎完美的編輯器。

官網(wǎng)：https://code.visualstudio.com

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

源碼：https://github.com/Microsoft/vscode

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

VS Code安裝后，我們一般還需要搜索安裝一些所需要的插件輔助開發(fā)。安裝插件很簡單，在搜索面板中查找到后，直接安裝即可。

一般我們需要安裝這些vs code 插件:

Vetur

Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發(fā)者必備。

ESLint

ESLint 是一個語法規(guī)則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統(tǒng)一的代碼。

而 VSCode 中的 ESLint 插件就直接將 ESLint 的功能集成好，安裝后即可使用，對于代碼格式與規(guī)范的細節(jié)還可以自定義，并且一個團隊可以共享同一個配置文件，這樣一個團隊所有人寫出的代碼就可以使用同一個代碼規(guī)范，在代碼簽入前每個人可以完成自己的代碼規(guī)范檢查。

VS Code - Debugger for Chrome 結合Chrome進行調(diào)試的插件

此工具簡直就是前端開發(fā)必備，將大大地改變你的開發(fā)與調(diào)試模式。

以往的前端調(diào)試，主要是 JavaScript 調(diào)試，你需要在 Chrome 的控制臺中找到對應代碼的部分，添加上斷點，然后在 Chrome 的控制臺中單步調(diào)試并在其中查看值的變化。

而在使用了 Debugger for Chrome 后，當代碼在 Chrome 中運行后，你可以直接在 VSCode 中加上斷點，點擊運行后，Chrome 中的頁面繼續(xù)運行，執(zhí)行到你在 VSCode 中添加的斷點后，你可以直接在 VSCode 中進行單步調(diào)試。

Beautify

Beautify 插件可以快速格式化你的代碼格式，讓你在編寫代碼時雜亂的代碼結構瞬間變得非常規(guī)整，代碼強迫癥必備，較好的代碼格式在后期維護以及他人閱讀時都會有很多的便利。

2) 安裝node開發(fā)環(huán)境

利用VS Code開發(fā)，我們很多時候，需要使用命令行npm進行相關模塊的安裝，這些需要node環(huán)境的支持，安裝好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插件的安裝

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

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

2、開發(fā)環(huán)境的配置使用

對于Vetur 等代碼自動修正處理，我們需要在VS Code里面進行設置好，在【文件】【首選項】【設置】中，然后單擊Settings.json進行編輯即可。

我這里主要設置保存代碼后能夠?qū)Υa進行縮進排版的常規(guī)的處理

調(diào)試環(huán)境的處理，為了結合Chrome調(diào)試VScode，我們需要安裝插件Debugger for Chrome ，然后進行Vue項目代碼的設置處理即可。

打開項目根目錄的Vue.Config.js文件，在合適的位置，加入productionSourceMap:true以及devtool:'source-map'如下所示

然后再在運行面板里面，進行調(diào)試參數(shù)設置的處理，如下所示

指定這些設置后，我們就可以以調(diào)試模式進行調(diào)試VS Code里面的代碼了，代碼只需要設置對應的斷點即可跟蹤對象的數(shù)據(jù)。

調(diào)試前，記得先使用npm run dev 啟動項目，項目完全啟動后會在Chrome瀏覽器打開項目地址，再使用F5進行項目代碼的調(diào)試。

Vue DevTools也是用來跟蹤Vue項目路由、狀態(tài)等信息的，可以信息很好的跟蹤處理。

為了點亮Chrome瀏覽器上面Vue DevTools圖標，我們可以在Vue項目的main.js里面加入一行代碼。

Vue.config.devtools=process.env.NODE_ENV==='development'如下界面所示

這篇隨筆作為一個簡單的開篇，主要介紹VS Code環(huán)境的安裝，以及對應插件的配置，并聯(lián)合Chrome如何實現(xiàn)項目代碼的調(diào)試處理。

以上就是Vue Element前端應用開發(fā)之開發(fā)環(huán)境的準備工作的詳細內(nèi)容，更多關于Vue Element前端應用開發(fā)之開發(fā)環(huán)境的準備工作的資料請關注腳本之家其它相關文章！

最新評論