搭建前端开发环境

前端开发环境搭建

一、 安装Google Chrome

首先到官网下载安装包，下载完毕点击安装，安装完成后可以根据需要把浏览器设置为默认浏览器，然后可以在浏览器里面设置个性装扮。

二、 安装Node

到官方网站下载：https://nodejs.org/en/

下载完成后，安装出C盘以外的盘，然后安装，安装完成以后验证是否已经安装成功，打开cmd，在里面输入 node -v 和 npm -v 就会出现node和npm的版本号。

接下来进行配置npm在安装全局模块时的路径和缓存cache的路径。因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix “G:\js\node\node_global”

npm config set cache “G:\js\node\node_cache”

成功以后，配置一下环境变量。

最后测试一下，在cmd命令下执行 npm install webpack –g，webpack 安装成功，执行 npm webpack -v 可以看到所安装webpack的版本号，

这些都成功了，就安装配置都成功了。

三、 安装Visual Studio Code

到 Visual Studio Code 官网https://code.visualstudio.com/下载并安装。

安装成功以后，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Egqy6Xs-1601017532794)(file:///C:\Users\60952\AppData\Local\Temp\ksohtml19672\wps1.jpg)]

在应用商城中搜索简体中文语言包（Chinese (Simplified) Language Pack for VS Code）和. 前端插件包（Frontend Extension Pack）下载安装好，注意要看日志更新情况，选择合适的。

四、 安装Git

到 Git 官网（https://git-scm.com/downloads)下载并安装最新版的 Git。安装过程中注意选择：用 Visual Studio Code为 Git 的默认编辑器。

找到[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RD9Hxsvg-1601017532801)(file:///C:\Users\60952\AppData\Local\Temp\ksohtml19672\wps2.jpg)]在里面输入：

$ git config --global user.name “Your Name”

$ git config --global user.email email@example.com来配置个人信息。

创建版本库： git init

ls -ha

五、 安装Typora

建版本库： git init

ls -ha

五、 安装Typora

到 www.typora.io,下载并安装Typora.