前言

在當(dāng)今快速發(fā)展的互聯(lián)網(wǎng)時(shí)代，前端開發(fā)已經(jīng)成為一項(xiàng)備受關(guān)注和需求不斷增長(zhǎng)的技術(shù)工作。作為一名前端工程師，擁有一臺(tái)配置良好的電腦是提高工作效率和順利進(jìn)行項(xiàng)目開發(fā)的關(guān)鍵。在本文中，我們將向大家介紹如何從零開始配置一臺(tái)新的電腦，以便能夠順利地搭建和運(yùn)行Vue項(xiàng)目。我們將逐步引導(dǎo)讀者完成整個(gè)配置過程，包括安裝必要的軟件和工具，配置開發(fā)環(huán)境，以及創(chuàng)建和運(yùn)行Vue項(xiàng)目。

一、VSCode（Visual Studio Code）

1.1 VSCode介紹與安裝

• VSCode是一款由微軟開發(fā)的免費(fèi)開源的代碼編輯器。它具有豐富的功能和插件生態(tài)系統(tǒng)，可以滿足前端開發(fā)的各種需求。VSCode支持多種編程語言，提供了代碼補(bǔ)全、語法高亮、調(diào)試等功能，讓開發(fā)者可以更高效地編寫和調(diào)試代碼。此外，VSCode還支持自定義配置和快捷鍵，以及集成終端和Git等工具，方便開發(fā)者進(jìn)行項(xiàng)目管理和團(tuán)隊(duì)協(xié)作。
• VSCode 的安裝
  Visual Studio Code在官網(wǎng)下載好安裝包，一路無腦確定（安裝路徑需要自己更改）

1.2 VSCode 常用插件安裝

兩個(gè)vue項(xiàng)目的插件。啟用了一者，另外一者一定要禁用，避免沖突

插件如何安裝 ? 點(diǎn)擊擴(kuò)展圖標(biāo)（Ctrl + shift + x） ? 搜索對(duì)應(yīng)的插件名稱 ? 安裝

1.3 VSCode代碼格式化

代碼格式化的效果受到所使用的插件、語言擴(kuò)展和格式化配置的影響。因此，可以根據(jù)自己的需求選擇適合的插件和配置來實(shí)現(xiàn)代碼格式化

當(dāng)你安裝了prettier插件后，可以通過這些設(shè)置實(shí)現(xiàn)Ctrl + S 的方法實(shí)現(xiàn)保存代碼時(shí)自動(dòng)格式化

首先打開設(shè)置

勾選兩個(gè)按鈕

也可以選擇 shift + Alt + F的方式格式化代碼

二、Node.js

2.1 Node的介紹與安裝

• Node.js是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行時(shí)。它允許開發(fā)者使用JavaScript在服務(wù)器端運(yùn)行代碼，而不僅僅局限于瀏覽器環(huán)境。Node.js提供了豐富的內(nèi)置模塊和包管理器npm，使開發(fā)者能夠輕松地構(gòu)建和管理應(yīng)用程序。Node.js在前端開發(fā)中廣泛應(yīng)用于構(gòu)建工具、服務(wù)器端渲染、API開發(fā)等方面，為前端工程師提供了更多的技術(shù)選擇和靈活性。
• Node的安裝
  Node.js 中文網(wǎng) ，進(jìn)官網(wǎng)后選擇長(zhǎng)期支持版本安裝，太新的版本不穩(wěn)定
  安裝十分簡(jiǎn)單，除了自己選擇安裝路徑外，其他的一路無腦下一步
  安裝完以后不用配置任何的環(huán)境
  
  在控制臺(tái)里檢驗(yàn)一下node和npm是否安裝完成（node安裝時(shí)自帶了npm的安裝，無需手動(dòng)安裝）

node -v

npm -v

能顯示出版本號(hào)就安裝完畢啦！

2. yarn的安裝

在控制臺(tái)執(zhí)行命令

npm install --global yarn

驗(yàn)證是否安裝成功

yarn --version

三、Webpack

3.1 Webpack的介紹與安裝

• Webpack： Webpack是一個(gè)模塊打包工具，它可以將多個(gè)前端資源（如JavaScript、CSS、圖片等）打包成一個(gè)或多個(gè)靜態(tài)文件。Webpack通過模塊化的方式管理項(xiàng)目中的各個(gè)模塊，并根據(jù)配置文件進(jìn)行打包和優(yōu)化。它提供了豐富的插件和加載器，可以處理各種類型的文件，實(shí)現(xiàn)代碼分割、壓縮、懶加載等功能。Webpack還支持熱模塊替換（HMR），可以在開發(fā)過程中實(shí)時(shí)預(yù)覽修改的效果。通過使用Webpack，前端工程師可以更好地組織和管理項(xiàng)目代碼，提高開發(fā)效率和性能。
• 全局安裝webpack

npm install webpack -g

四、Vue CLI

4.1 Vue CLI的安裝與介紹

• Vue CLI是一個(gè)用于快速構(gòu)建Vue.js項(xiàng)目的腳手架工具。它提供了一套完整的項(xiàng)目開發(fā)工具鏈，包括項(xiàng)目初始化、開發(fā)服務(wù)器、打包構(gòu)建等功能。Vue CLI基于Webpack，并集成了Vue.js相關(guān)的插件和配置，使得前端工程師可以快速搭建和開發(fā)Vue項(xiàng)目。Vue CLI還提供了豐富的插件和模板，可以根據(jù)項(xiàng)目需求進(jìn)行定制化配置。通過使用Vue CLI，前端工程師可以快速啟動(dòng)項(xiàng)目，統(tǒng)一項(xiàng)目結(jié)構(gòu)和開發(fā)規(guī)范，并享受到Vue.js的開發(fā)優(yōu)勢(shì)。
• 全局安裝Vue CLI

npm install -g @vue/cli

這里注意如果你是用yarn安裝的腳手架，需要自己配置環(huán)境
可以使用vue -V檢驗(yàn)是否安裝成功
全局安裝@vue/cli腳手架的環(huán)境配置

五、初始化Vue項(xiàng)目并運(yùn)行

新建一個(gè)文件夾，在控制臺(tái)輸入

vue create vue2_test

選擇vue2或者vue3的默認(rèn)模板安裝 (回車鍵)
安裝好后，執(zhí)行

cd vue2_test

npm run serve

就成功跑起一個(gè)vue2的初始化項(xiàng)目了

打開網(wǎng)址：

六、前端工程師必備軟件

6.1 Git

• 版本控制：Git 是一個(gè)分布式版本控制系統(tǒng)，用于管理代碼的版本和變更歷史。它可以幫助開發(fā)團(tuán)隊(duì)協(xié)作、追蹤代碼的修改、合并分支等。
• 分支管理：Git 允許創(chuàng)建和管理多個(gè)分支，方便并行開發(fā)和特性隔離。
• 團(tuán)隊(duì)協(xié)作：Git 提供了團(tuán)隊(duì)協(xié)作的功能，開發(fā)人員可以通過 Git 進(jìn)行代碼的共享、合并和沖突解決。
• 版本回退：Git 允許根據(jù)需要回溯到特定的代碼版本，方便進(jìn)行代碼的回退和恢復(fù)。
  git官網(wǎng)下載地址
  安裝完成后還需要配置ssh公鑰 將ssh文件夾中的公鑰（ id_rsa.pub）添加到GitHub管理平臺(tái)中

6.2 Snipaste

• 屏幕截圖：Snipaste 是一款強(qiáng)大的屏幕截圖工具，可以快速捕捉屏幕上的任意區(qū)域，并進(jìn)行標(biāo)注、編輯和保存。
• 粘貼板管理：Snipaste 提供了粘貼板管理功能，可以方便地管理剪貼板中的歷史內(nèi)容，快速粘貼和復(fù)制。
  Snipaste下載地址

6.3 Pxcook

• 設(shè)計(jì)稿標(biāo)注：Pxcook 是一款設(shè)計(jì)稿標(biāo)注工具，用于將設(shè)計(jì)師的設(shè)計(jì)稿轉(zhuǎn)化為前端開發(fā)所需的標(biāo)注信息，包括尺寸、顏色、字體等。
• 導(dǎo)出資源：Pxcook 可以將設(shè)計(jì)稿中的圖片、圖標(biāo)等導(dǎo)出為前端開發(fā)所需的資源文件，方便開發(fā)人員使用。
  Pxcook下載地址

七、VUE開發(fā)者工具

參考此文：Vue3 簡(jiǎn)介

Vue 開發(fā)者工具（Vue Devtools）是一款用于輔助 Vue.js 應(yīng)用開發(fā)的瀏覽器插件。它的主要作用是幫助開發(fā)者在瀏覽器中調(diào)試和分析 Vue.js 應(yīng)用，提供了一系列強(qiáng)大的開發(fā)工具和功能，包括：

• 組件層級(jí)查看：Vue Devtools 可以展示當(dāng)前頁面中的 Vue 組件層級(jí)結(jié)構(gòu)，方便開發(fā)者快速了解組件的嵌套關(guān)系和層級(jí)結(jié)構(gòu)。

• 組件狀態(tài)查看和修改：開發(fā)者可以查看每個(gè)組件的狀態(tài)數(shù)據(jù)，包括 props、data、computed 等，并且可以實(shí)時(shí)修改這些數(shù)據(jù)，以便測(cè)試和調(diào)試。

• 事件追蹤和調(diào)試：Vue Devtools 可以顯示組件的事件監(jiān)聽器，包括綁定的事件和觸發(fā)的事件。開發(fā)者可以追蹤事件的觸發(fā)和處理過程，方便調(diào)試和分析問題。

• 性能監(jiān)控和分析：Vue Devtools 提供了性能監(jiān)控和分析工具，可以查看組件的渲染性能、內(nèi)存占用等指標(biāo)，幫助開發(fā)者優(yōu)化應(yīng)用的性能。

• Vuex 狀態(tài)管理工具：Vue Devtools 集成了 Vuex 的狀態(tài)管理工具，可以查看和修改應(yīng)用的狀態(tài)樹，方便調(diào)試和測(cè)試 Vuex 相關(guān)的功能。

• 時(shí)間旅行調(diào)試：Vue Devtools 支持時(shí)間旅行調(diào)試，可以回溯和查看組件的狀態(tài)和數(shù)據(jù)在不同時(shí)間點(diǎn)的變化，方便調(diào)試復(fù)雜的數(shù)據(jù)流和狀態(tài)管理。

總之，Vue Devtools 是一款非常實(shí)用的開發(fā)工具，可以大大提升 Vue.js 應(yīng)用的開發(fā)效率和調(diào)試能力，幫助開發(fā)者更好地理解和調(diào)試 Vue 組件、狀態(tài)和事件。

總結(jié)

通過本文的指導(dǎo)，你已經(jīng)學(xué)會(huì)了從零開始配置一臺(tái)新的電腦，并順利地搭建和運(yùn)行Vue項(xiàng)目。首先，安裝必要的軟件和工具。然后，通過Vue CLI創(chuàng)建一個(gè)新的Vue項(xiàng)目，并啟動(dòng)開發(fā)服務(wù)器。最后，根據(jù)個(gè)人喜好配置編輯器和插件，以提高開發(fā)效率。希望本文能夠幫助你順利地配置新電腦，并開展愉快的Vue項(xiàng)目開發(fā)工作。文章來源地址http://www.zghlxwxcb.cn/news/detail-628058.html

到了這里，關(guān)于如何從零開始配置前端環(huán)境以及安裝必備的軟件插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！