前言
新手前端第一天進公司,拿到一臺新電腦,該如何配置電腦環(huán)境呢~
首先你可以檢查自己的電腦是否安裝了這些東西
//查看node,有的話會顯示node版本,例如v16.14.2
node --version
//查看yarn,例如1.22.19,非必須安裝
yarn --version
//nvm,例如1.1.11,僅是因為切換node版本需要
nvm --version
//vue-cli,顯示例如@vue/cli 5.0.8
vue --version
//淘寶鏡像源,如果鏡像源地址為https://registry.npm.taobao.org/,則表示已經有了
npm config get registry
//git,例如git version 2.29.2.windows.2
git --version
一、谷歌瀏覽器
官網下載地址:https://www.google.cn/chrome/
這里建議把這個翻譯軟件配置起,很好用。
1.在谷歌瀏覽器內右鍵點擊訪問Chrome應用商店
2.搜索沉浸式翻譯
3.添加擴展程序
4.添加成功后在谷歌瀏覽器右擊就可以使用了
5.效果如下
?二、vscode
下載地址:https://code.visualstudio.com/
vscode常用到的插件:
# Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code
# Live Server
# CSS Peek
# Code Runner
# Auto Rename Tag
# Path Intellisense
# Prettier - Code formatter
# Vetur
# Vue Language Features (Volar)
# Vue VSCode Snippets
# Vue 3 Snippets
# TypeScript Vue Plugin (Volar)
# ES7+ React/Redux/React-Native snippets
三、HBuilderX
下載地址:https://www.dcloud.io/hbuilderx.html
四、微信開發(fā)者工具(下載穩(wěn)定版)
下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
五、Snipaste
下載地址:https://www.bear20.com/window/4641/725693464.html
(這截圖工具nb格拉斯)
六、安裝node
這里建議使用方法2安裝nvm來安裝node,因為后期可能需要切換node版本
方法1、直接安裝node(不推薦,推薦方法2)
下載地址:https://nodejs.cn/download/
1?可以在這里直接下載最新版本
1?或者點擊上圖的"全部安裝包"下載指定版本
下載后一路Next,就注意下面這一步,要選擇Add to PATH,它可以在環(huán)境變量中直接為你增加node
2.驗證是否安裝成功
windows+r 輸入cmd,輸入以下命令,顯示版本即安裝成功
3.node安裝好之后將npm鏡像源設置為淘寶鏡像源,提高下載速度并避免網絡問題
npm config set registry https://registry.npm.taobao.org/
方法2、安裝nvm來安裝node(推薦)
node -v 查看如果之前已經安裝了node,則必須要先卸載:
1. 控制面板 => 卸載程序 => 卸載Node.js
2. 刪除相關文件夾(如果存在的話)
C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users{User}\AppData\Roaming\npm
C:\Users{User}\AppData\Roaming\npm-cache
刪除C:\Users\用戶名 下的.npmrc文件
刪除npm、node的所有環(huán)境變量
刪除完畢后打開cmd輸入node -v查看是否會返回版本號
3.檢查環(huán)境變量(編輯系統(tǒng)環(huán)境變量=>環(huán)境變量=>系統(tǒng)變量=>雙擊Path),刪除node.js和npm的引用(如果存在的話)
4.輸入命令 node -v 看是否已卸載成功
下載地址:https://github.com/coreybutler/nvm-windows/releases
2.1 下載好之后解壓,里面有一個nvm-setup.exe
文件,雙擊運行
2.2 輸入命令
//查看nvm是否安裝成功
npm -v
//設置nodejs鏡像
nvm node_mirror http://npm.taobao.org/mirrors/node/
//設置npm鏡像
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
2.3?安裝與版本管理
//查看node可安裝的版本
nvm list available
//查看當前電腦已安裝的所有node版本
nvm list
//下載node版本,推薦LTS版本
nvm install 'node版本號'
//使用(切換)node版本
nvm use 'node版本號'
//卸載node版本
nvm uninstall 'node版本號'
---安裝了node后也可以把yarn安裝起(非必須安裝)
npm install -g yarn
注意:yarn需要看是否配置環(huán)境變量
yarn global bin 得到路徑
//例如 C:\Users\18790\AppData\Local\Yarn\bin
# 然后去控制面板-->系統(tǒng)和安全-->系統(tǒng)-->編輯系統(tǒng)環(huán)境變量-->環(huán)境變量-->
-->系統(tǒng)變量-->雙擊看Path是否有例如C:\Users\18790\AppData\Local\Yarn\bin,
沒有的話就新建以配置Path
七、vue腳手架環(huán)境
npm install -g vue-cli
八、git安裝
1、下載git
git下載地址:https://git-scm.com/
2、git安裝步驟
一般一路下一步就好,鼠標右鍵點開下圖
輸入git --version,下圖代表安裝成功
然后右鍵選擇Options…,把git的界面語言設置為中文,如下圖:
3、配置用戶信息
安裝完 Git 后,第一件事就是設置用戶名和郵箱地址。Git 需要使用這些基本信息記錄對項目進行操作的用戶。
在命令行中輸入以下代碼實現(xiàn)配置。注意如果使用了 --global選項,則該命令只需要運行一次,就可以永久生效
git config --global user.name "你的用戶名"
git config --global user.email “你的郵箱地址”
3-1、修改git用戶信息
那如果電腦是別人的需要怎么配置成你的呢
1.打開電腦設置搜索憑據(jù)管理器
2.如果有git地址就點擊編輯,修改成自己的git賬號密碼
3.如果沒有就點擊添加普通憑據(jù),填寫確定就可以了
4、檢查配置信息
運行終端指令
# 查看所有全局配置項
git config --list --global
5、TortoiseGit 安裝(小烏龜)(非必須)
由于Git 自帶的圖形化工具并不完善,由第三方提供的TortoiseGit 圖形化操作工具就尤為重要。
下載地址 https://tortoisegit.org/
一些可能會用到的東西
阿里巴巴矢量圖標庫:?http://iconfont.cn
正則表達式在線生成工具: http://tools.jb51.net/regex/create_reg/
常用Git命令清單:https://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html
css動畫:https://animate.style/#migration
echarts沒有的可以在這找找:http://ppchart.com/#/文章來源:http://www.zghlxwxcb.cn/news/detail-838554.html
Git?Book:文章來源地址http://www.zghlxwxcb.cn/news/detail-838554.html
到了這里,關于前端新手電腦環(huán)境配置(保姆級)的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!