久久精品片,精品人妻不卡在线

之前一直采用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的界面大概如下所示，一般安裝后，如果為英文界面，則安裝它的中文包即可。

image

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

image

一般我們需要安裝這些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)保證寫(xiě)出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。

而 VSCode 中的 ESLint 插件就直接將 ESLint 的功能集成好，安裝后即可使用，對(duì)于代碼格式與規(guī)范的細(xì)節(jié)還可以自定義，并且一個(gè)團(tuán)隊(duì)可以共享同一個(gè)配置文件，這樣一個(gè)團(tuán)隊(duì)所有人寫(xiě)出的代碼就可以使用同一個(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 插件可以快速格式化你的代碼格式，讓你在編寫(xiě)代碼時(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?/，類(lèi)似于 view) 是一套用于構(gòu)建用戶(hù)界面的漸進(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