背景

新人入职时，一般都需求重新装置一下 Web 前端开发环境，而每个人自由发挥装置的环境都不太相同，有的人直接大局装置了 Node.js，有的人在用 Node.js 10 版别，有的人在用 cnpm。。。

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

同时提供一个装置脚本，新人可直接履行脚本一键装置，省时省心，若你不关心装置过程，可滑动到底部的「脚本运用指南」部分。

留意，以下过程中触及的指令仅针对 Mac 体系，在 Windows 体系可能会报错~

装置过程

装置 iTerm2

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

去官网下载装置包，跟着过程一步步装置即可~

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

# 装置 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 指令更新装备文件：

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 源办理库。

npm i nrm -g

如果装置报错，能够测验履行 npm cache clean --force

装置 Yarn

引荐运用 Yarn 替换 NPM。

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

代码和文档

装置脚本 GitHub 地址