Web 前端开发环境安装指南

背景

新人入职时，一般都需要重新安装一下 Web 前端开发环境，而每个人自由发挥安装的环境都不太一样，有的人直接全局安装了 Node.js，有的人在用 Node.js 10 版本，有的人在用 cnpm。。。

故梳理了一份前端开发环境安装指南，统一了环境配置。

同时提供一个安装脚本，新人可直接执行脚本一键安装，省时省心，若你不关心安装步骤，可滑动到底部的「脚本使用指南」部分。

注意，以下步骤中涉及的命令仅针对 Mac 系统，在 Windows 系统可能会报错~

安装步骤

安装 iTerm2

iTerm2 终端神器，用过的人都说好~

去官网下载安装包，跟着步骤一步步安装即可~

如果你不想下载一个新的应用，ZSH 也是一个很好的选择，它是一个让终端更精致的库，有更好看的主题，内置了 git、rake、ruby 等命令，配置即可开启使用。

1 2	# 安装 ZSH sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装 NVM

NVM 是一个用来管理 Node.js 版本的库。

开始安装 NVM 之前，需要删除之前全局安装的 Node.js 和 NPM 包：

# 查看已经安装在全局的模块，以便删除这些全局模块后再按照不同的 Node.js 版本重新全局安装。执行完之后，记得自己备份一下当前的全局版本包，后续通过 NVM 安装好 Node.js 之后再安装回来
npm ls -g --depth=0

# 删除全局 node_modules 目录
sudo rm -rf /usr/local/lib/node_modules
# 删除 node 命令
sudo rm /usr/local/bin/node
# 删除全局 Node.js 模块注册的软链
cd  /usr/local/bin && ls -l | grep "../lib/node_modules/" | awk '{print $9}'| xargs rm

开始安装 NVM：

# 命令安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

# 下载安装包安装（不推荐）
# 下载地址 https://github.com/coreybutler/nvm-windows/releases

然后配置一下环境变量：

# 打开配置文件
vim ~/.zshrc

# 将这段内容复制到文件最后面，然后保存退出
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

之后用 source 命令更新配置文件：

1	source ~/.zshrc

也可以重启终端来更新。

然后安装一个 Node.js 版本：

# 安装指定的 Node.js 版本
nvm install 16.10.0

# 使用指定的 Node.js 版本
nvm use 16.10.0

# 设置默认的 Node.js 版本
nvm alias default v16.10.0

安装 NRM

NRM 是一个 NPM 源管理库。

1	npm i nrm -g

如果安装报错，可以尝试执行 npm cache clean --force

安装 Yarn

推荐使用 Yarn 替换 NPM。

1	npm i yarn -g

安装 VSCode

VSCode 下载地址

VSCode 插件推荐：

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code：中文语言包
Eslint
Vetur：Vue.js 语法高亮
GitLens：代码提交记录可视化
Auto Close Tag：HTML 标签、组件标签自动闭合
Auto Rename Tag：标签自动同步修改
DotENV：环境变量配置文件高亮提示
Vue VSCode Snippets：Vue 快捷语法，包含 JS 和 HTML 代码块
vscode-icons：图标库，可让 VSCode 界面更精致
Git History：查看提交历史记录
Ant Design Vue helper：基于 Vue.js 的 Ant Design 快捷语法
WXML - Language Service：微信小程序快捷语法、语法提示

好用的插件还有很多，这里就不一一列举了。

插件一个一个安装也挺麻烦的，上面的这些插件我已经集成到了一个插件包，只需要安装一个插件即可，欢迎下载使用：wy-vscode-kit VSCode 插件包

脚本使用指南

就是将上面的步骤写成 shell 脚本，安装环境时只需要执行脚本即可。脚本 GitHub 地址

注意，该脚本仅适配了 Mac 系统，且适用于重装环境或第一次安装，其他场景下执行可能会有报错~

目录说明

.
├── README.md
├── install.sh      # 环境安装脚本
├── restore.sh      # 恢复 uninstall.sh 的内容
└── uninstall.sh    # 卸载已有的环境依赖

使用

# 克隆
git clone git@github.com:wytxer/web-env-install.git

cd web-env-install

# 卸载已有依赖
sh ./uninstall.sh

# 安装依赖
sh ./install.sh

# 恢复
sh ./restore.sh