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

如何从零开始搭建前端开发环境

MAC环境

首先终端输入sudo spctl --master-disable命令来开启任何来源。如果不开启这个会导致很多软件安装不了。

安装node环境和配置cnpm和tnpm方便安装依赖。因为原版npm因网络问题可能会导致各种报错。mac在安装node的时候会自动安装git，因此可以省去这一步。

验证

确保电脑环境干净，处于未安装node和npm状态

终端命令行输入：

node -v
//command not found

npm -v
//command not found

卸载

终端命令行输入：

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

本地清除原有缓存

终端命令行输入：

npm cache verify           # 清除npm本地缓存
npm cache clean —force.    # 清除npm本地缓存
yarn cache clean           # yarn 清除缓存

第一步：安装编辑器vscode

（有很多种编辑器，自己选择喜欢的，sublime,vscode，hbuilder,pychram…）

vscode下载传送门

第二步：安装git

git下载传送门

git安装教程
1.下载好git包后，双击打开，按照提示进行下一步操作，一直到安装完成。
2.打开终端输入git --version

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

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

安装webpack:

• 终端输入npm install --save-dev webpack
• 或者指定安装版本npm install --save-dev webpack@<version>

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

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

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

如果之前有安装过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

第五步：安装yarn

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

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