搭建前端开发环境
一 . 安装Google浏览器 打开Chrome Devtools
)
二 . 安装 Node 环境配置
1. 检测
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922093956.png)
2. 配置NPM
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921192213.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921192213.png)
3. 环境变量
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921194023.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921194243.png)
4. 配置国内镜像 安装CNPM
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921193832.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921193943.png)
三 . 安装 Visual Studio Code
1. 安装
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922100640.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922100640.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922100640.png)
2. 安装插件
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922101011.png)
四 . 安装Git
1. 安装
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921194803.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921211948.png)
a. 图标组件(Addition icons) :
选择是否创建桌面快捷方式。
b. 桌面浏览(Windows Explorer integration) :
浏览源码的方法,使用bash 或者 使用Git GUI工具。
c. 关联配置文件 :
是否关联 git 配置文件, 该配置文件主要显示文本编辑器的样式。
d. 关联shell脚本文件 :
是否关联Bash命令行执行的脚本文件。
e. 使用TrueType编码 :
在命令行中是否使用TruthType编码, 该编码是微软和苹果公司制定的通用编码。
2. 设置Visual Studio Code为Git的默认编辑器
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212037.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212047.png)
设置开始菜单中快捷方式的目录名称, 也可以选择不在开始菜单中创建快捷方式
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212456.png)
a. Git自带:
使用Git自带的Git Bash 命令行工具。
b. 系统自带CMD:
使用Windows系统的命令行工具。
c. 二者都有:
上面二者同时配置,但是注意,这样会将windows中的find.exe和 sort.exe工具覆盖。
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212652.png)
a. 检查出windows格式转换为unix格式:
将windows格式的换行转为unix格式的换行再进行提交。
b. 检查出原来格式转为unix格式:
不管什么格式的,一律转为unix格式的换行再进行提交。
c. 不进行格式转换 : 不进行转换,检查出什么,就提交什么。
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212707-1600777141576.png)
a. Use MinTTY (the default terminal of MSYS2)
Git Bash将使用MinTTY作为终端模拟器,
该模拟器具有可调整大小的窗口,非矩形选区和Unicode字体。
Windows控制台程序(如交互式Python)必须通过’winpty’启动才能在MinTTY中运行。
b. Use Windows’ default console window
Git将使用Windows的默认控制台窗口(“cmd.exe”),
该窗口可以与Win32控制台程序(如交互式Python或node.js)一起使用,但默认的回滚非常有限,需要配置为使用unicode 字体以正确显示非ASCII字符,并且在Windows10之前,其窗口不能自由调整大小,并且只允许矩形文本选择。
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212949.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921212949.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921213108.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921213141.png)
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921213404.png)
3. 设置用户名与邮箱
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921215728-1600777323794.png)
4. 创建版本库
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200921215747.png)
五 . 安装Typora
1. 勾选创建桌面快捷方式
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922102408.png)
2. Install
![](https://raw.githubusercontent.com/0102hyc/PicGoImages/master/QQ%E6%88%AA%E5%9B%BE20200922102535.png)