如何搭建前端开发环境

如何搭建前端开发环境

一、安装浏览器–Google Chrome

到Google Chrome官网下下载安装最新版的Chrome浏览器

如何搭建前端开发环境

二、安装JavaScript运行时–Node

到Node官网https:/nodejs.org/zh-cn/下载、安装并设置好最新的Node长期支持版。

1、安装

双击下载后的安装包,点击以上的Run(运行)

如何搭建前端开发环境

点击Next(下一步)按钮

如何搭建前端开发环境

勾选接受协议选项,点击next(下一步)按钮

如何搭建前端开发环境

Node.js默认安装目录为"C:\Program Files\nodejs\”,你可以修改目录,并点击next(下一步)

如何搭建前端开发环境

点击树形图标来选择你需要的安装模式,然后点击下—步next(下一步
1.Node.js运行
2.nupm包
3.在线文档的快捷方式
4.添加到路径
最好直接全选,以防后期需要用到的时候在重新添加,会有点麻烦

如何搭建前端开发环境

点击Install(安装)开始安装Node.js。你也可以点击Back(返回)来修改先前的配置。然后并点击next(下一步)

以防后期需要用到的时候在重新添加,会有点麻烦

如何搭建前端开发环境

以防后期需要用到的时候在重新添加,会有点麻烦

如何搭建前端开发环境

点击Finish(完成)按钮退出安装向导

如何搭建前端开发环境

2、安装检测

01、使用快捷键Ctrl+r打开运行框,输入cmd

如何搭建前端开发环境

02、输入node --version会返回一个版本号

如何搭建前端开发环境

03、查看环境变量输入path
如何搭建前端开发环境

04、配置NPM:

npm config set prefix "D:\Program Filesinodejslnode_giobal"
npm config set cache "D:\Program Filesinodejs\node_cache"

输入上述代码运行后会在你安装好的node文件夹下找到相应的文件夹

如何搭建前端开发环境

05、配置国内镜像源

npm config set registry https: //registry.npm.taobao.org

三、安装编辑器–Visual Studio Code

1、安装Visual Studio Code

到Visual Studio Code官网https:/lcode.visualstudio.com/下载并安装最新版本Visual Studio Code。

01、进入到Visual Studio Code的下载网站

如何搭建前端开发环境

02、点击下载好的VSCode安装包进入到VSCode的安装向导界面,如图:(直接点击"下一步”)

如何搭建前端开发环境

03、.更改安装路径,建议不要什么软件都安装在系统盘(C盘),造成系统卡顿,最好是专门分一个盘安装软件

如何搭建前端开发环境

如何搭建前端开发环境

04、点击“安装”

如何搭建前端开发环境
如何搭建前端开发环境

<

⒉.安装插件

如何搭建前端开发环境
如何搭建前端开发环境

推荐安装插件:
1.简体中文语言包(Chinese(Simplified) Language Pack for VS Code): https:/marketplace.visualstudio.com/items?ite
mName=MS-CEINTL.vscode-language-pack-zh-hans
2前端插件包(Frontend Extension Pack): https:/marketplace.visualstudio.com/items?itemName=karbassi.frontend-ext
ension-pack
请注意:插件并非越多越好,有些插件已经过时了,有些插件对性能有严重影响。

四、安装分布版式控制工具–Git

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

01、点击下载好的Git安装包进行安装,依次点击next键。

如何搭建前端开发环境
如何搭建前端开发环境

02、进行到如下步骤时选择自己所需的默认编辑器,后按下next键

如何搭建前端开发环境

配置个人信息:

五、安装Markdown 文档编辑器–Typora

到www.typora.io(官网)或者www.typora.net(中文),下载并安装最新版Typora。
自行搜索Markdown文档语法,试着写一份Markdown文档。

01、点击下载好的安装包,再点击next按钮

如何搭建前端开发环境

02、点击Install按钮

如何搭建前端开发环境