目錄
一.先安裝個谷歌瀏覽器，穩(wěn)定版。
二.安裝公司日常交流軟件
三.安裝個VSCode
四.安裝nvm
五.vue-cli的安裝和配置
六.安裝git
配置git賬號
拉取線上倉庫到本地
一些常用git命令
GitLab配置公鑰私鑰
?七.其他工具
網(wǎng)絡(luò)抓包工具：whistle
反向代理工具：nginx
調(diào)試接口工具：postman
重構(gòu)工具：PS、XD 等
收到電腦要看一下配置，先把配置內(nèi)存條搞定，不然安裝完環(huán)境，用了兩天發(fā)現(xiàn)內(nèi)存不足，還不能安內(nèi)存條，那就得換電腦，開發(fā)環(huán)境白配置了，要重新來。。。
一.先安裝個谷歌瀏覽器，穩(wěn)定版。
作為一名前端程序員，和瀏覽器打交道肯定是必不可少的。Chrome，Edge 都有著豐富的擴(kuò)展資源。你可以下載插件幫助你更好的在工作中調(diào)試代碼。
- React Developer Tools
- Vue.js devtools
- GraphQL developer tools
如果要調(diào)兼容那繼續(xù)下載火狐、360等。
二.安裝公司日常交流軟件
如微信電腦版，企業(yè)微信，釘釘?shù)取?/p>
三.安裝個VSCode
工欲善其事，必先利其器
對于我們每一位軟件工程師來說，都要有自己順手的 IDE 開發(fā)工具，它就是我們的武器。
一個好用的 IDE 不僅能提升我們的開發(fā)效率，還能讓我們保持愉悅的心情，這樣才是非常 Nice 的狀態(tài)
那么，什么是 IDE 呢 ？
what
IDE（Integrated Development Environment，集成開發(fā)環(huán)境）是含代碼編輯器、關(guān)鍵詞高亮、智能感應(yīng)、智能糾錯、格式美化、版本管理等功能于一身的 “高級代碼編輯器”
每個 IT 工程師都要有自己順手的 IDE，它是我們的武器
要理解無論使用什么 IDE 編寫出來的代碼，本質(zhì)上都是 “白底黑字” 的，都是 “純文字” 的
具體的安裝細(xì)節(jié)可以參考這個文章：VSCode 安裝教程（超詳細(xì)）_9.冄2.7.號的博客-CSDN博客
四.安裝nvm
這個可以管理安裝nodejs的不同版本+對應(yīng)版本的npm，當(dāng)你遇到不同node版本的項目時就可以隨時切換node版本。
1.安裝nvm及配置
首先下載nvm不要下載node,如果電腦已經(jīng)有node的話需要卸載node，并使用命令提示符來查看node的位置（where node）手動刪除
nvm下載鏈接：nvm文檔手冊 - nvm是一個nodejs版本管理工具 - nvm中文網(wǎng)
下載最新版本，next傻瓜式操作(需要注意的是）
選擇node.js文件位置，如果需要更改，請在這里進(jìn)行更改位置。
2.安裝完成檢查
nvm -v
顯示出版本號即可，如果沒有顯示版本號就需要配置環(huán)境，跟node配置系統(tǒng)環(huán)境相同（將nvm目錄地址添加到系統(tǒng)環(huán)境PATH中然后保存就可以了）
現(xiàn)在你可以使用nvm list 來查看在nvm控制之下的所有版本的node
nvm list? 輸入完成之后你會發(fā)現(xiàn) 欸 是空的 ，因為你沒有下載任何node版本
3.下載node版本
使用? nvm list available? 命令來顯示所有可下載版本的node
使用? nvm install latest? 安裝最新版本的node
使用? nvm install 版本號 來安裝指定版本的node
安裝完成后就可以使用nvm list 來查看自己安裝的所有的node版本了
版本號之前的攜帶* ，說明正在使用，這個時候是沒有*號的，所以需要指定版本
使用? nvm use 版本號 來指定node版本
再輸入 nvm list 就可以看到 攜帶*號的node了
使用 命令提示符? node? -v查看node版本，npm -v查看npm版本 如果都出來了那么你已經(jīng)完成了安裝
五.vue-cli的安裝和配置
使用??npm install -g @vue/cli? 命令進(jìn)行vue-cli的全局安裝
安裝完成后 使用vue -V? 【這里的-V是大寫哦！】來查看是否安裝成功，如果出現(xiàn)版本號就說明安裝成功
在選定的文件夾內(nèi)，點擊地址欄。輸入cmd，打開指定位置的命令提示符。
使用vue create demo 來建立一個vue項目
按照個人需求置配，執(zhí)行cd demo? 和 npm run? serve運(yùn)行項目
六.安裝git
下載地址為?git-scm.com或者gitforwindows.org，或者阿里鏡像
可以參考這個文章：Git 詳細(xì)安裝教程（詳解 Git 安裝過程的每一個步驟）_git安裝_mukes的博客-CSDN博客?
配置git賬號
配置全局的用戶賬號 ：
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"輸入： git config user.name可以看看是否配置成功。
拉取線上倉庫到本地
復(fù)制git的https地址
到你想放置項目的文件夾，單擊鼠標(biāo)右鍵，選擇git bash here。
輸入:? ? git clone ?"地址"? 項目就拉到本地了。
一些常用git命令
git init // 初始化 在工作路徑上創(chuàng)建主分支
git clone "地址" // 克隆遠(yuǎn)程倉庫
git clone -b dev "地址" // 克隆指定dev分支的倉庫代碼到本地
git checkout -b dev // 創(chuàng)建 并切換到dev 分支
git status // 查看狀態(tài) 一般可以查看當(dāng)前分支是否有沖突。也會提示你 下一步需要如何敲命令
git add . // 將所有文件提交到暫存區(qū)
git commit -m "提交的備注信息" // 提交到倉庫
git push origin 分支 // 推送到遠(yuǎn)程倉庫上
git pull origin 分支// 拉取遠(yuǎn)程倉庫里的分支
git branch -a // 查看本地與遠(yuǎn)程的所有分支
git checkout dev // 切換到dev分支
git stash // 隱藏本地編輯 未提交的內(nèi)容
git stash pop // 釋放出隱藏的內(nèi)容GitLab配置公鑰私鑰
官方說明：?使用 SSH 密鑰與極狐GitLab 通信 | 極狐GitLab
為什么需要配置公鑰和私鑰？
? ? git 使用 http 協(xié)議，每次 pull push 都會要輸入密碼，會比較麻煩，使用 git 協(xié)議，使用 ssh 密鑰，可以省去每次 pull 或 push 都要輸入密碼的麻煩。
? ? 公鑰一般是給服務(wù)器的，他們會在權(quán)限中加入我們給的公鑰，當(dāng)我們從遠(yuǎn)程倉庫下載項目的時候，執(zhí)行 git clone 時，那個服務(wù)器通過他綁定的公鑰來匹配我的私鑰，此時，如果匹配，就可以正常下載，如果不匹配，則項目下載失敗。
? ? 大多數(shù)的 git 服務(wù)器都會選擇使用 SSH 公鑰來進(jìn)行授權(quán)，因此系統(tǒng)中每個用戶必須提供一個公鑰用于授權(quán)，沒有則要生成一個。
配置步驟：
第一步生成密鑰
在終端輸入 ，根據(jù)官方文檔說明可以生成多種規(guī)則的密鑰如：ed25519，rsa等，此處是ed25519
ssh-keygen -t ed25519 -C "yourname@xx.com"?生成密鑰 一路回車即可。
第二步 找到生成的密鑰文件
一般文件會在C:\Users\賬號\.ssh，查看 ssh 文件夾里面會有 id_ed25519 和 id_ed25519.pub 兩個文件。
復(fù)制id_ed25519.pub文件內(nèi)的內(nèi)容。
第三步 復(fù)制公鑰內(nèi)容到 gitlab中配置。GitLab平臺-用戶頭像-偏好設(shè)置-SSH密鑰
?
?選擇到期時間，添加即可。
同理：云效代碼管理平臺-頭像-個人設(shè)置-SSH公鑰
?七.其他工具
網(wǎng)絡(luò)抓包工具：whistle
$ npm install -g whistlewhistle 不僅可以抓包，還可以配置手機(jī)端的代理，讓你可以調(diào)試移動端的頁面
反向代理工具：nginx
你可以使用 phpstudy 來快速配置 nginx文章來源：http://www.zghlxwxcb.cn/news/detail-458673.html
調(diào)試接口工具：postman
重構(gòu)工具：PS、XD 等
今天入職第一天，如果后續(xù)有什么需要安裝的我再補(bǔ)上~文章來源地址http://www.zghlxwxcb.cn/news/detail-458673.html
到了這里，關(guān)于前端新員工入職，需要為你的新電腦安裝一些環(huán)境，開發(fā)工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
