整体介绍

简述

• Node.js环境

  前端开发的基础环境，学习Node.js的安装、版本管理工具nvm及npm命令的使用。

• IDE

  介绍最常见的Webstorm与vscode的使用方式

• 虚拟机

  主要是windows与macOS平台下的虚拟化介绍，用于搭建docker环境，后续的开发环境全部建立在docker之上，安装在Linux环境（虚拟机）之内。

  如果大家想使用云服务器，可以考虑购买各大云服务商的2C4G的配置，磁盘最少要40G（配置4G的swap），最好按量付费，用完即删。

• Linux入门

  常见的Linux命令，可以上手即可，比如：vim编辑器、常见的文件操作命令、更新包安装包的命令等。

本地开发环境

Node.js

直装方式：Node.js下载，官方地址：https://nodejs.org/zh-cn/ (opens new window)，建议下载LTS版本，最好下载12，14这两个版本。

缺点：不利于多环境的Node.js项目的运行！

Nvm(Node.js版本管理)：

• Linux/MacOS：https://github.com/nvm-sh/nvm (opens new window)

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  

  或者

  wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  

  然后在~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc文件其中之一添加：

  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" # This loads nvm
  

• Windows：https://github.com/coreybutler/nvm-windows/releases (opens new window)

  国内加速源下载地址：https://github.91chi.fun/https://github.com//coreybutler/nvm-windows/releases/download/1.1.9/nvm-setup.zip (opens new window)

Yarn安装：

npm i -g yarn

可以并行安装包，使用yarn命令快速安装前端项目的依赖。

npm源切换工具nrm:

npm i -g nrm --registry=https://registry.npmmirror.com
nrm use taobao

国内源cnpm：https://npmmirror.com/ (opens new window)

npm install -g cnpm --registry=https://registry.npmmirror.com

IDE

• WebStorm（收费）：https://www.jetbrains.com/webstorm/ (opens new window)
• VSCode（推荐）：https://code.visualstudio.com/ (opens new window)
• Atom：https://atom.io/ (opens new window)

Vue-CLI

Vue官方的开发CLI工具 (opens new window)，安装Node之后，使用npm命令安装：

npm i -g @vue/cli

CLI 服务是构建于 webpack (opens new window) 和 webpack-dev-server (opens new window) 之上的。它包含了：

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app (opens new window) 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

测试环境

虚拟机自建环境

• Parallels -> 针对 macOS
• VMWare -> 全平台
• Hyperv -> Windows平台支持

云服务器

阿里云：https://cn.aliyun.com/ (opens new window)

腾讯云：https://cloud.tencent.com/ (opens new window)

华为云：https://www.huaweicloud.com/ (opens new window)

AWS：https://aws.amazon.com/cn/ (opens new window)

直装Docker服务

• macOS：https://docs.docker.com/desktop/mac/install/ (opens new window) 里面有两个很大的按钮(按照自己的CPU版本来选择)：

  

• Linux：https://github.com/docker/docker-install (opens new window)

  推荐使用get-docker的脚本：

  curl -fsSL https://get.docker.com -o get-docker.sh
  sh get-docker.sh
  

• Windows：https://hub.docker.com/editions/community/docker-ce-desktop-windows (opens new window)

安装docker-compose集成命令（只针对Linux）服务：https://docs.docker.com/compose/install/ (opens new window)

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

Desktop下载后，自己会带docker-compose，不需要另外安装

Docker加速服务

• 阿里云加速器(点击管理控制台 (opens new window) -> 登录账号(淘宝账号) -> 右侧镜像工具 -> 镜像加速器 -> 复制加速器地址)
• 网易云加速器 https://hub-mirror.c.163.com (opens new window)
• 百度云加速器 https://mirror.baidubce.com (opens new window)
• 科大加速器 https://docker.mirrors.ustc.edu.cn/
• 七牛云加速器：https://reg-mirror.qiniu.com

Linux中设置/etc/docker/daemon.json：

{
  "registry-mirrors": [
    "https://hub-mirror.c.163.com",
    "https://mirror.baidubce.com"
  ]
}

Mac/Windows上设置：

{
  "registry-mirrors": [
    "https://hub-mirror.c.163.com",
    "https://mirror.baidubce.com"
  ]
}

使用docker info查看是否设置生效：

Registry Mirrors:
 https://hub-mirror.c.163.com/