基于mac下前端开发基本环境搭建 VSCode + git + node.js + npm+ webpack + vue-cli4 + nrm + yarn

笔记一篇，备查（PS：一个教程搬运工）。

第一步：安装编辑器vscode

（有很多种编辑器，自己选择喜欢的，sublime,vscode，hbuilder,pychram…）
vscode下载传送门
此处搬运大神写的安装配置教程：
vscode安装教程
在vscode里安装一个插件Debugger for Chrome还有Vue,还有一个是在命令面板中安装一个和node.js有关的shell，名字暂时想不起来了。（后续补上）

第二步：安装git

git下载传送门
此处搬运大神写的详细安装配置教程：
git安装教程
1.下载好git包后，双击打开，按照提示进行下一步操作，一直到安装完成。
2.打开终端输入git --version
结果如下图出现版本号即为安装成功了。

Mac关于git使用教程传送门

第三步：安装node.js和npm和webpack

ps：最新的Nodejs安装包已经包含了npm,所以下载最新的nodejs就行，安装过程基本上点next就可以。
安装完成后，在终端输入node --version node --version,回车，输出版本号即安装成功，输入npm --version,输出版本号即安装成功。如下图所示：

附上下载地址和安装教程
node.js下载传送门
此处搬运大神写的node.js安装配置教程地址：
node.js安装配置教程

安装webpack: 终端输入npm install --save-dev webpack或者指定安装版本npm install --save-dev webpack@

(ps:如果使用的webpack 4+ 版本，还需要安装 cli,webpack 4将 cli 分离了。)

安装webpack-cli: 终端输入npm install --save-dev webpack-cli

此处搬运大神写的webpack安装教程地址：
webpack介绍及详细安装教程传送门

第四步：全局安装vue-cli4.0脚手架工具

Ps：新手遇到了一个坑，如果之前有安装过vue-cli，要先把原来的卸载掉，再执行一遍安装。

卸载命令：sudo npm uninstall vue-cli -g(如果是windows 的话，输入npm uninstall vue-cli -g)
安装命令:然后输入 sudo npm install -g @vue/cli，安装vue-cli4.0版本（如果是windows的话，输入npm install @vue/cli -g)
如下图所示：（耐心等待安装完成）
检验是否安装完成：在终端输入vue --version,如下图所示出现版本号即为安装成功啦。

此处搬运大神写的vue-cli4安装配置教程地址：
vue-cli4安装配置教程

第五步：安装nrm

打开终端，输入sudo npm install -g nrm(如果是windows的话，输入npm install -g nrm)

检验是否安装完成：在终端输入nrm --version,如下图所示出现版本号即为安装成功啦。

第六步：安装yarn
打开终端，输入sudo npm install -g yarn(如果是windows的话，输入npm install -g yarn)

检验是否安装完成：在终端输入yarn --version,如下图所示出现版本号即为安装成功啦。

至此前端开发的环境就安装好啦。