簡(jiǎn)介：有時(shí)候，我們需要在新電腦 或者 電腦重置后，配置前端開發(fā)環(huán)境，具體都需要安裝什么軟件和插件，這里來記錄一下（文章適合新手和小白，大佬可以帶過）。

?前端開發(fā)環(huán)境，需要用到的軟件和插件：

1. Chrome

2. Visual Studio Code（vscode）?

3. Node.js（npm /?cnpm）

4. Vue CLI （vue-cli / vue/cli）

5. Git

一、安裝Chrome（谷歌瀏覽器）

Tips: Google Chrome程序員必備，它是一款由谷歌公司開發(fā)的網(wǎng)頁(yè)瀏覽器，于2008年首次發(fā)布。它被廣泛認(rèn)為是速度快、安全性高、功能強(qiáng)大的瀏覽器之一。Chrome支持多種操作系統(tǒng)，包括Windows、MacOS和Linux。它具有簡(jiǎn)潔的界面、快速的頁(yè)面加載速度、強(qiáng)大的擴(kuò)展程序生態(tài)系統(tǒng)和內(nèi)置的安全功能。Chrome還集成了Google的搜索引擎，使用戶可以更便捷地進(jìn)行搜索，適合個(gè)人用戶和企業(yè)用戶使用。

1、Chrome瀏覽器安裝地址

Chrome官網(wǎng)https://www.google.cn/chrome/

2、這里就不多說了，直接安裝使用就行，也可以直接在應(yīng)用商店進(jìn)行下載。

二、安裝Visual Studio Code（簡(jiǎn)稱vscode）

Tips: Visual Studio Code是一款輕量級(jí)、功能強(qiáng)大的源代碼編輯器，可在Windows、macOS、Linux甚至瀏覽器上使用。它內(nèi)置了對(duì)JavaScript、TypeScript和Node.js的支持，并為其他語(yǔ)言和運(yùn)行時(shí)提供了豐富的擴(kuò)展生態(tài)系統(tǒng)。

1、Vscode官網(wǎng)

Visual Studio Code官網(wǎng)https://code.visualstudio.com/

2、下載時(shí)，選擇好與自己匹配的系統(tǒng)版本，一般的64位windosws用戶，點(diǎn)擊下載這個(gè)

下載完成以后，直接點(diǎn)擊安裝，點(diǎn)擊選擇接受協(xié)議，點(diǎn)擊下一步安裝就好。

三、安裝Node.js

Tips: 這里解釋下，npm?是 nodejs 中的一部分，通常與 nodejs 一起安裝和更新。當(dāng)你安裝了 nodejs，npm?也隨之安裝。npm全稱是Node Package Manager，它是 nodejs的官方包管理工具，用來管理和分發(fā) JS庫(kù)和其他相關(guān)資源的系統(tǒng)，npm 可以安裝、共享和管理項(xiàng)目的依賴關(guān)系，可通過 `npm -v` 命令可以檢查其版本信息。

1、Node.js官網(wǎng)

Node.js官網(wǎng)https://nodejs.org/en

Node.js歷史版本：

Node.js歷史版本https://nodejs.org/dist/

2、Node.js中文網(wǎng)

Node.js中文網(wǎng)http://nodejs.p2hp.com/

3、如需，安裝步驟 和 配置nodejs的環(huán)境變量，詳見此文

Node.js安裝步驟以及環(huán)境變量的配置https://blog.csdn.net/weixin_65793170/article/details/126885041?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170684972716777224451412%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=170684972716777224451412&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-126885041-null-null.nonecase&utm_term=nodejs&spm=1018.2226.3001.4450

4、安裝完成后，可以使用node -v和npm -v來檢測(cè)是否安裝成功，注意這里的-v是小寫字母?？梢栽诿钐崾痉翱?或者 vscode中都可以檢測(cè)是否安裝成功。

這里說下，如何在命令提示符窗口檢測(cè)安裝結(jié)果？

直接在鍵盤按下win + r 鍵，彈出輸入框，輸入cmd，

再按回車鍵，命令提示符窗口啟動(dòng)，然后直接輸入node -v和npm -v檢測(cè)安裝結(jié)果，如下

node版本號(hào)v16.17.1，npm版本號(hào)8.15.0，可以看到檢測(cè)安裝成功。

?5、這里推薦配置安裝下npm鏡像cnpm，cnpm是一個(gè)為中國(guó)用戶量身打造的Node.js包管理工具，它通過提供國(guó)內(nèi)的鏡像服務(wù)器來加速Node.js包的下載和安裝，為Node.js開發(fā)者帶來了更加流暢和高效的開發(fā)體驗(yàn)。想要使用cnpm，需要先行配置下載cnpm，cnpm的下載命令如下：

//cnpm 安裝使用新的鏡像源
npm install -g cnpm --registry=https://registry.npmmirror.com/
 
舊的域名 
http://npm.taobao.org 和 
http://registry.npm.taobao.org 已經(jīng)在 2022 年 5 月 31 日停止服務(wù)

6、使用npm安裝cnpm時(shí)報(bào)錯(cuò)，安裝不上時(shí)，可以查看下文，里面有詳解：

cnpm安裝不上，cnpm安裝時(shí)報(bào)錯(cuò)https://blog.csdn.net/weixin_65793170/article/details/136441677?spm=1001.2014.3001.5501

7、cnpm安裝完成后，如果cnpm命令不管用的話，也是需要配置環(huán)境變量的，一般的cnpm文件地址為如下：

C:\Users\Administrator\AppData\Roaming\npm

8、如果 cnpm命令 在命令提示符窗口管用，而在Vscode中不生效，則需要在PowerShell中設(shè)置遠(yuǎn)程簽名，跟 vue命令 在命令提示窗口管用，在Vscode中不生效情況是一樣的，配置詳情如下：

cnpm命令在Vscode中不生效https://blog.csdn.net/weixin_65793170/article/details/128987191?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170922812116800197041820%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=170922812116800197041820&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-8-128987191-null-null.nonecase&utm_term=vue&spm=1018.2226.3001.4450

四、安裝Vue腳手架，也就是Vue CLI / vue-cli? /? vue/cli? ?

Tips: Vue CLI是Vue.js官方提供的標(biāo)準(zhǔn)化開發(fā)工具，旨在簡(jiǎn)化和加快Vue.js項(xiàng)目的開發(fā)流程。通過vue-cli，開發(fā)者可以通過命令行或用戶界面（UI）快速地創(chuàng)建一個(gè)新的Vue項(xiàng)目，并自動(dòng)生成適合Vue和Webpack的項(xiàng)目模板。簡(jiǎn)而言之，Vue腳手架可以幫助開發(fā)者更高效地搭建起一個(gè)具備所需依賴庫(kù)的Vue項(xiàng)目，以便更快地進(jìn)入實(shí)際編程工作。

?1、Vue腳手架安裝命令

npm install -g @vue/cli
//或者
cnpm install -g @vue/cli

2、安裝完成后，有時(shí)候會(huì)遇到，在命令提示符窗口使用vue命令管用，但在vscode中，vue命令不生效的情況，這時(shí)候需要在Windows Powershell管理員模式中配置執(zhí)行策略，詳見此文

配置執(zhí)行策略https://blog.csdn.net/weixin_65793170/article/details/128987191?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170684702416800182752105%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=170684702416800182752105&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-128987191-null-null.nonecase&utm_term=vue%E5%91%BD%E4%BB%A4%E5%9C%A8vscode%E4%B8%AD%E4%B8%8D%E7%94%9F%E6%95%88&spm=1018.2226.3001.4450

3、安裝完成后，可通過vue -V（注意是大寫的V）來檢測(cè)vue版本是否安裝成功，如果能看到Vue CLI的版本號(hào)，說明Vue CLI已經(jīng)成功安裝。

五、安裝Git

Tips: Git是一個(gè)免費(fèi)和開源的 分布式版本控制系統(tǒng)，旨在處理從小到 非常大的項(xiàng)目，速度和效率。Git很容易學(xué)習(xí)， 占地面積小，性能快如閃電。 它超越了配置管理工具，如Subversion、CVS、Perforce和ClearCase 具有廉價(jià)的本地分支等功能，方便的集結(jié)地，以及 多個(gè)工作流。

1、Git官網(wǎng)

Git官方網(wǎng)站https://git-scm.com/download/win

1. 打開官網(wǎng)，根據(jù)自己的電腦系統(tǒng)選擇32位或64位版本進(jìn)行下載。
2. 雙擊安裝包開始安裝：等待下載完成后，雙擊安裝包開始安裝過程。
3. 選擇安裝目錄：在安裝過程中，可以選擇Git的安裝目錄，可以使用默認(rèn)目錄或指定其他目錄。
4. 選擇安裝組件：根據(jù)自己的需求選擇需要安裝的Git組件。
5. 設(shè)置開始菜單目錄名稱：在安裝過程中，可以選擇開始菜單中Git的目錄名稱，默認(rèn)即可。
6. 選擇命令行環(huán)境：根據(jù)喜好選擇是否使用Git的命令行環(huán)境。
7. 調(diào)整PATH環(huán)境變量：選擇是否將Git的可執(zhí)行文件路徑添加到系統(tǒng)的PATH環(huán)境變量中，這樣可以在任何目錄下直接使用Git命令。
8. 開始安裝：確認(rèn)配置無誤后，點(diǎn)擊“Install”按鈕開始安裝Git。
9. 完成安裝：等待安裝完成后，點(diǎn)擊“Finish”按鈕退出安裝程序。

2、安裝完成后，您可以通過打開終端窗口并輸入命令`git --version`來檢查Git是否安裝成功。如果返回Git的版本信息，則表示安裝成功。

3、驗(yàn)證安裝是否成功，還可以在桌面右擊鼠標(biāo)，如果看到兩個(gè)Git相關(guān)的選項(xiàng)（如“Git Bash Here”和“Git GUI Here”），則說明Git已經(jīng)成功安裝。

文章來源地址http://www.zghlxwxcb.cn/news/detail-841387.html

這樣下來，就可以在Vscode中使用Vue進(jìn)行開發(fā)，并在Chrome中進(jìn)行調(diào)試工作啦！

創(chuàng)作不易，感覺有用，就一鍵三連，感謝(●'?'●)

到了這里，關(guān)于前端配置開發(fā)環(huán)境，新電腦配置前端開發(fā)環(huán)境，Vue開發(fā)環(huán)境配置的詳細(xì)過程（前端開發(fā)環(huán)境配置，電腦重置后配置前端開發(fā)環(huán)境）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！