Skip to main content

前端环境搭建

1.VSCode 的安装#

下载地址:https://code.visualstudio.com/

image-20210313111017784

此处以 Mac 为例(Windows 安装则选择对应模块即好)

image-20210313111117183

打开之后 VSCode 的界面

image-20210313111631435

2.VSCode 的插件安装#

点击左侧第五个按钮,进入商店,安装插件。

image-20210313112815106

前端常用的插件有:

插件作用
Chinese (Simplified) Language Pack for Visual Studio Code中文简体语言包
Auto Close Tag自动添加 HTML / XML 关闭标签
Auto Rename Tag自动重命名配对的 HTML / XML 标签
HTML Snippets代码自动填充
HTML Boilerplate提供生成标准 HTML 样板代码
Image Preview鼠标移到路径里显示图像预览
intelliSense for CSS class names in HTML项目中 css 文件里的名称智能提示在 html 中
JavaScript (ES6) code snippetses6 代码片段
Live Server浏览器实时刷新
Path Intellisense路径自动补全
VeturVue 语法高亮显示, 语法错误检查, 代码自动补全
open in browser浏览器中打开 html
Markdown Preview Enhanced实时预览 markdown,markdown 使用者必备
ESLintESLint 可以帮助我们检查 Javascript 编程时的语法错误。
Color Info这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了
Beautify格式化代码
Code Runner非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go 等等 安装完成后,右上角会出现:▶
Git History查看 git 日志以及图表和详细信息
Guides代码的标签对齐线
jQuery Code Snippetsjq 代码段提示
IntelliSense for CSS class names in HTML智能地给你已定义 CSS 类名的提示
VSCode Great Icons小图标区分不同的文件类型
Bracket Pair Colorizer给括号加上不同的颜色,便于区分不同的区块

3.VSCode 的使用#

VSCode 官方文档

点击这里,也可以很轻松地找到它

image-20210313113630105

首页

image-20210313115037113

创建你的第一行代码

image-20210313115413907

创建文件

image-20210313115739665

image-20210313115800939

在文件中输入 html:5

image-20210313115840498

至此,你可以开始写下你的第一行代码啦~

4.node.js 的安装#

Mac 版本#

下载地址:Node.js 的安装 (你可以选择其他安装方式 包管理工具安装

image-20210313120437730

下载完毕后,打开文件,一直双击继续即可

image-20210313120819026

安装成功后,是这样的:

image-20210313120935657

验证是否安装成功

查看 Node.js 的版本号

在终端里输入如下命令:

node -v

如果 Node.js 成功安装,可以看到类似如下的信息:

image-20210313121342838

查看 npm 的版本号

在终端里输入如下命令:

npm -v

如果 npm 成功安装,可以看到类似如下的信息:

image-20210313121256824

Windows 版本#

下载地址:Node.js 的安装

image-20210313122433843

下载完成后进行安装,如这里我们安装路径为 C:\Program Files\nodejs

image-20210313122553873

安装完后可查看其版本信息: 以管理员身份运行 CMD,然后分别输入命令node -vnpm -v即可查看其版本信息

image-20210313122615957

说明:新版的 Node.js 已自带 npm,安装 Node.js 时会一起安装。npm 的作用就是对 Node.js 依赖的包进行管理,也可以理解为用来安装/卸载 Node.js 需要装的东西

配置 npm 全局安装路径 在 NodeJS 安装目录中增加 node_global(用于存放 NodeJS 依赖包文件)和 node_cache(用于存储下载依赖包时的文件)文件夹 以管理员身份运行 CMD,定位到 NodeJS 的安装目录,然后分别输入命令如下命令:

image-20210313122846467

image-20210313122901521


右击计算机,点击属性,点击高级系统设置,点击环境变量

系统变量,新建,变量名为 NODE_PATH,变量值为 C:\Program files\nodejs\node_global\node_modules\node_modules image-20210313123019576


用户变量,Path 编辑,将 C:\Users\quber\AppData\Roaming\npm 修改为 C:\Program files\nodejs\node_global

image-20210313123119908


系统变量,Path 编辑,增加 C:\Program files\nodejs\node_global,如果已存在则不需要添加

image-20210313123500352

测试

打开 CMD,输入 node 即可进入开发模式 如这时候你可以输入console.log('Hello NodeJS!')回车后就会在窗口中显示 Hello NodeJS

image-20210313123708352

express 模块测试 配置完后,安装个 module 测试下,我们就安装最常用的 express 模块,打开 CMD 窗口,定位到 NodeJS 安装目录,输入如下命令进行模块的全局安装(安装完成后,我们会发现在之前定义的全局文件夹 node_global 中多了相应的依赖包了):

npm install express -g

image-20210313123802430

image-20210313123815091

安装完 express 模块后,新开一个 CMD 窗口并定位到安装目录,然后输入 node 进入开发模式,然后输入require('express')命令回车,如果能列出一些列的信息则说明 express 模块已安装成功

image-20210313123838253

版权许可

本书采用“保持署名—非商用”创意共享4.0许可证。只要保持原作者署名和非商用,您可以自由地阅读、分享、修改本书。详细的法律条文请参见创意共享网站

Last updated on