一、下載并安裝VScode

安裝VScode 官網(wǎng)下載

二、配置node.js環(huán)境

1. 安裝node.js 官網(wǎng)下載
   會(huì)自動(dòng)配置環(huán)境變量和安裝npm包(npm的作用就是對(duì)Node.js依賴的包進(jìn)行管理)，此時(shí)可以執(zhí)行 node -v 和 npm -v 分別查看node和npm的版本號(hào)：
   

2. 配置系統(tǒng)變量
   因?yàn)樵趫?zhí)行例如npm install webpack -g等命令全局安裝的時(shí)候，默認(rèn)會(huì)將模塊安裝在C:\Users\用戶名\AppData\Roaming路徑下的npm和npm_cache中，不方便管理且占用C盤空間，所以進(jìn)行以下操作進(jìn)行修改
   1）執(zhí)行命令：（我的node安裝目錄是D:\nodejs）
   npm config set prefix “D:\nodejs\node_global”
   npm config set cache “D:\nodejs\node_cache”
   2）然后在環(huán)境變量 -> 系統(tǒng)變量中新建一個(gè)變量名為 “NODE_PATH”， 值為“D:\nodejs\node_modules”
   3）最后編輯用戶變量里的Path，將相應(yīng)npm的路徑改為：D:\nodejs\node_global
   4）在cmd命令下執(zhí)行 npm install webpack -g 然后安裝成功后可以看到自定義的兩個(gè)文件夾已生效(要以管理員身份進(jìn)入cmd(在開(kāi)始菜單中搜索命令提示符點(diǎn)擊以管理員身份)，否則會(huì)有權(quán)限問(wèn)題)
   
   webpack 也已安裝成功，執(zhí)行 npm webpack -v 可以看到所安裝webpack的版本號(hào)

3. 安裝cnpm
   在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org
   完成后輸入cnpm -v檢查
   

三、構(gòu)建vue-cli腳手架（react跳過(guò)此項(xiàng)看第四步）

執(zhí)行命令cnpm install -g vue-cli
執(zhí)行命令cnpm install -g vue
執(zhí)行命令cnpm install -g @vue/cli-init
通過(guò)vue -V查看版本號(hào)是否安裝成功，如果不成功則檢查vue安裝目錄和環(huán)境變量

四、安裝react腳手架并創(chuàng)建react項(xiàng)目

執(zhí)行命令cnpm install -g create-react-app
執(zhí)行命令create-react-app my-react-project (my-react-project是項(xiàng)目的名稱，這條命令會(huì)新建my-react-project目錄，并且生成package.json，安裝相關(guān)的react,react-dom等依賴)
執(zhí)行命令cd my-react-project
npm start
瀏覽器中會(huì)打開(kāi)以下頁(yè)面，表示react開(kāi)發(fā)環(huán)境已經(jīng)搭建成功了
在vsCode中打開(kāi)該項(xiàng)目，目錄如下