【从入门到提桶】一站式前端开发环境配置

188 阅读4分钟

一、Mac

1. Homebrew

Homebrew: macOS飞速安装教程

这里面介绍了快速一键安装 Homebrew,设置国内镜像源,设置 bottles 镜像等方法,肥肠优秀👍

如果你是在 M1 芯片的 Mac 上安装 Homebrew,请参考 M1 芯片安装教程

# brew 常用命令

brew update #更新 Homebrew
brew search package #搜索软件包
brew install package #安装软件包
brew uninstall package #卸载软件包
brew upgrade #升级所有软件包
brew upgrade package #升级指定软件包
brew list #列出已安装的软件包列表
brew services command package #管理 brew 安装软件包
brew services list #列出 brew 管理运行的服务
brew info package #查看软件包信息
brew deps package #列出软件包的依赖关系
brew help #查看帮助
brew cleanup #清除过时软件包
brew link package #创建软件包符号链接
brew unlink package #取消软件包符号链接
brew doctor #检查系统是否存在问题
# 安装 git
brew install git

# 安装 wget
brew install wget

2. Oh My Zsh

2.1 zsh

macOS 最新系统已经内置 zsh,先检查是否已安装 zsh:

zsh --version

如果没有安装 zsh,使用 brew 安装:

brew install zsh

将 zsh 设置为系统默认 shell:

# 查看系统支持的 shell
cat /etc/shells

# 将上面返回的 zsh 路径填入下方
chsh -s /bin/zsh

2.2 oh-my-zsh

执行以下任意 一键安装脚本 即可快速安装 oh-my-zsh

github 官方:

# curl
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# wget
sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

gitee 镜像:

# curl
export REMOTE=https://gitee.com/imirror/ohmyzsh.git
sh -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ohmyzsh/ohmyzsh/tools/install.sh)"

# wget
export REMOTE=https://gitee.com/imirror/ohmyzsh.git
sh -c "$(wget -O- https://cdn.jsdelivr.net/gh/ohmyzsh/ohmyzsh/tools/install.sh)"

# fetch
export REMOTE=https://gitee.com/imirror/ohmyzsh.git
sh -c "$(fetch -o - https://cdn.jsdelivr.net/gh/ohmyzsh/ohmyzsh/tools/install.sh)"

配置主题:

官方主题样式

# 进入主题目录,查看内置主题
~/.oh-my-zsh/themes
ls

# 编辑 .zshrc 文件
vim ~/.zshrc

# 找到 ZSH_THEME="robbyrussell",此为默认主题,替换你想要的主题
ZSH_THEME="ys"

# 保存 .zshrc 后执行
source ~/.zshrc

3. NVM

3.1 安装

# 安装
brew install nvm

# 检查是否安装成功
nvm -v

如果出现 nvm: command not found,在 ~/.zshrc 中添加如下内容:

# nvm
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

3.2 node 镜像

替换 node 镜像为国内镜像源 npmmirror,在 ~/.zshrc 中添加:

# nvm
export NVM_NODEJS_ORG_MIRROR=http://npmmirror.com/mirrors/node

3.3 nvm 常用命令

nvm ls #列出所有已安装的 node 版本
nvm ls-remote #列出所有远程服务器的版本(官方node version list)
nvm list #列出所有已安装的 node 版本
nvm list available #显示所有可下载的版本
nvm install stable #安装最新版 node
nvm install [<version>] #安装指定版本 node
nvm install [<version>] --default #安装指定版本 node 并设置为默认版本
nvm uninstall [<version>] #删除已安装的指定版本
nvm use [<version>] #切换到指定版本 node
nvm current #当前 node 版本
nvm alias <name> <version> #给不同的版本号添加别名
nvm unalias <name> #删除已定义的别名
nvm alias default <version> #设置默认版本

3.4 使用 nrm 管理 npm 镜像源

# 安装
npm i nrm

# 查看 npm 镜像源列表
nrm ls
# 带*号为当前使用的源(nrm部分版本有bug,不显示*)
# npm ---------- https://registry.npmjs.org/
# yarn --------- https://registry.yarnpkg.com/
# tencent ------ https://mirrors.cloud.tencent.com/npm/
# cnpm --------- https://r.cnpmjs.org/
#*taobao ------- https://registry.npmmirror.com/
# npmMirror ---- https://skimdb.npmjs.com/registry/

# 切换源
nrm use taobao

# 添加自定义npm镜像
nrm add myNpm https://myNpm.com/

二、Windows

1. Git

官网下载git安装

建议 windows 上使用 git 内置的 shell : Git Bash

  • vscode 中打开终端,点击 + 号后面的 v,选择默认配置文件,将默认终端切换为 Git Bash
  • 桌面或文件夹右键菜单选择 Git Bash Here

2. NVM

2.1 安装 NVM for Windows

github: NVM for Windows

安装过程省略,主要记住选择的两个路径,一个是nvm安装路径,一个是node快捷方式路径

使用 nvm -v 检查是否安装成功,如果没有找到命令,检查是否自动配置了环境变量,没有的话手动配置下

根据上面安装时选择的路径来设置
nvm 默认安装路径是 C:\Users\用户\AppData\Roaming\nvm,打开 nvm 安装路径下的 settings.txt 可以看到 root 和 path 两个路径变量

NVM_HOME:nvm的安装路径
NVM_SYMLINK:node的快捷方式路径

  1. 新建系统环境变量 NVM_HOME、NVM_SYMLINK
  2. 在系统环境变量中的 path 中新建 %NVM_HOME%%NVM_HOME%

2.2 更换 node 镜像源

打开 nvm 安装路径下的 settings.txt 文件,添加如下内容:

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

nvm-windows 的用法跟 mac 上是基本一样的,就不做赘述了

三、代理

有时候你挂了代理,在终端执行 git pull 拉取 github 代码时发现迟迟没有响应,半晌,才返回如下信息

fatal: 无法访问 'https://github.com/**/*.git/':LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 

这是因为,默认情况下,shell 是不会走代理的🥲,我们需要手动设置一下,让 shell 也走代理

mac 打开 ~/.zshrc

windows 打开 ~/.bashrc(前提是使用 Git Bash,没有则手动创建一个 .bashrc 文件,资源管理器中文件路径为 C:\Users\用户\.bashrc,在 Git Bash 中则是 ~/.bashrc

添加如下内容:

# proxy
alias proxy='export all_proxy=socks://127.0.0.1:1089'
# alias proxy='export all_proxy=http://127.0.0.1:8889'
alias unproxy='unset all_proxy'

all_proxy 后面的代理类型 socks or http端口号根据你自己的代理软件来设置

当你新开一个 shell ,需要走代理时执行 proxy,要取消代理时执行 unproxy 即可😎

# 设置代理
proxy

# 测试
curl cip.cc

# 取消代理
unproxy

OVER