Node.js的环境搭建方法和 npm 的使用方法

最新推荐文章于 2024-07-29 10:45:01 发布

没对象的野指针

最新推荐文章于 2024-07-29 10:45:01 发布

阅读量382

点赞数 5

分类专栏： Node.js 文章标签： Node.js 后端 JavaScript npm

本文链接：https://blog.csdn.net/qq_38494999/article/details/98289709

版权

Node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Node.js的环境搭建方法和 npm 的使用方法

Node.js 环境的搭建
npm（包管理器）使用方法
- npm 介绍
- npm 使用
Node.js 常用框架下载

Node.js 环境的搭建

Node.js 介绍

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。
Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node.js 下载

点击这里进入Node.js的官网下载Node.js的安装包

可以看到这里有两种版本供我们选择，这里我选择的是最新版本（如果是实际开发的道友建议你下载稳定版本）
在这里插入图片描述
我们可以看到有很多版本供我们进行选择，在这里我选择的是window64位安装版

下载完成后,我们左键双击打开安装包进行安装

打开安装界面后，我们直接点击右下角的Next按钮进行下一步就可以了
在这里插入图片描述
然后点击接受协议，再单击下Next按钮就可以进行下一步了

接着我们可以选择安装路径，当然这不是强制的看你自己

到这里为止，我们的 Node.js 就算安装完成了！！！

配置Node.js

安装好了之后，我们还暂时不能去使用它，还需要配置相关的系统环境变量才可以。

首先，我们在桌面上找到此电脑这个图标（WIN7和XP的话叫我的电脑）
在这里插入图片描述
说明一下，我是因为装了电脑主题,所以电脑图标发生了改变！！！（喜欢穹妹这款主题的话可以在下方点赞评论找我要安装包）

回到正题，接着我们鼠标右键单击此电脑这个图标，选择属性这一选项，然后鼠标左键单击属性选项在这里插入图片描述
接着我们继续左键单击左侧的高级系统设置选项

接着是最后一步，左键单击下方的环境变量选项，我们就可以进去期待已久的环境变量设置面板了

在这里插入图片描述
进去到环境变量设置面板后，我们把目光投向下方的系统变量这一列表里
！！！注意是系统变量！！！
很多萌新分不清用户变量和系统变量，你只要记住我们需要的只有系统变量也就是下边这一列表就可以了，千万不要搞错了！！！

好了，接下来让我们在列表中寻找一个叫Path的选项
在这里插入图片描述
然后双击它，之后会弹出一个列表，我们点击右侧的新建按钮

将我们的 Node.js 的安装目录输入进去，我的是：D:\Node.js\（这里替换为自己的安装目录）
注：不想手动输入的道友，也可以选择右侧的浏览按钮！！！

会弹出一个文件选择框，选择自己安装Node.js的路径就可以了
在这里插入图片描述
输入好路径之后，会在列表的最后一行多出一个值，如图：

确认好自己所输入的路径没有错误后，我们继续按照上边的方法输入第二个值：
D:\Node.js\node_global (前边替换为自己Node.js的安装路径，node_global 不变)

在这里插入图片描述
接着，输入第三个值：
D:\Node.js\node_global\node_modules（前边替换为自己Node.js的安装路径，node_global 以后不变）

在这里插入图片描述
到这里，我们的环境变量就全部设置完成了，我们依次在每个窗口点击确认，保存我们的设置

接下来，我们来到 Node.js 的安装目录

在此目录下，新建两个文件夹，分别命名为 node_global 和 node_cache
在这里插入图片描述
到现在为止，我们的node.js 就已经全部配置完成了，接下来我们要去测试一下他是否可以使用！！！

node.js 测试

首先，我们需要在键盘上按钮WIN键（就是图标是个window窗口的那个按键）和 R键
接着会弹出这样一个窗口:
注：如果你的win + r 键没反应的话，你可以试试用电脑上的搜索功能也可以达到一样的效果
在这里插入图片描述
接下来，让我们输入cmd，然后点击确认

之后，会弹出这样一个窗口

有细心的小伙伴可能发现了，窗口标题是一个路径，如果你的win + r 键失灵的话，你又不找不到搜索功能在哪里，那么你就可以根据这个路径去文件管理器去找个程序，然后运行它！！！
这里，我把路径写出来，方便下看不清的道友！！！路径是：C:\WINDOWS\system32\cmd.exe

接着，我们输入 node-v 这个指令然后按下回车来测试我们是否成功安装node.js
在这里插入图片描述
出现版本号说明我们已经成功的搭建好了 node.js 环境

npm（包管理器）使用方法

npm 介绍

NPM 是随同 Node.js 一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm 使用

npm毋庸置疑是一款很强大的工具，但是他所采用的镜像大多数为国外的镜像，所以下载速度非常慢！！！

这里我们要介绍另一款工具 cnpm ，这是淘宝所出品的一款类似于npm的国内镜像资源管理工具！！！

下面，我来说明一下如何使用这款工具吧！！！
首先，在命令行输入：npm config set prefix “D:\Node.js\node_global” (这里换成自己对应的路径)，然后按下回车
接着，继续输入：npm config set cache “D:\Node.js\node_cache” (一样换成自己对应的路径)
，然后按下回车
在这里插入图片描述
以上两条指令是设置我们npm的临时安装目录和全局安装目录

接下来，就是比较关键的一步了！！！
依然是命令行输入：npm config set registry "http://registry.npmjs.org/"
紧接着输入：npm install -g cnpm，然后按下回车
之后就耐心的等待一下，正在下载和安装！！！
在这里插入图片描述
出现这个页面，说明我们已经安装成功了！！！

现在来测试一下吧！！！
输入指令：cnpm -v，然后按下回车

如果出现这个页面，那么说明我们的cnpm已经可以正常的使用了！！！

Node.js 常用框架下载

Express框架

Express 框架介绍

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性：
1. 可以设置中间件来响应 HTTP 请求。
2. 定义了路由表用于执行不同的 HTTP 请求动作。
3. 可以通过向模板传递参数来动态渲染 HTML 页面。

Express 框架下载

express4.x 版本将命令工具单独分了出来，所以要先下载express-generator，否则在创建项目时，会提示express命令找不到

在命令行输入命令：cnpm install -g express-generator，然后按下回车
之后就耐心的等待下载安装完成！！！
在这里插入图片描述
下载完成后的页面

接下来，开始下载 express
输入命令：cnpm install -g express，然后按下回车

下载完成后的页面
在这里插入图片描述
下载完成后，输入命令：express --version然后按下回车，来测试我们是否安装成功！！！

依赖项下载

以下几个重要的模块是需要与 express 框架一起安装的：
1. body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。
2. cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。
3. multer - node.js 中间件，用于处理 enctype=“multipart/form-data”（设置表单的MIME编码）的表单数据。

和上边一样，使用以下命令进行下载：

cnpm install -g body-parser
cnpm install -g cookie-parser
cnpm install -g multer

在这里插入图片描述

Webpack 框架

Webpack 框架介绍

Webpack是时下最流行的模块打包器
它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件
进行分析、压缩、合并、打包，最后生成浏览器支持的代码
特点：
代码拆分方案：webpack可以将应用代码拆分成多个块，每个块包含一个或多个模块，块可以按需异步加载，极大提升大规模单页应用的初始加载速度
智能的静态分析：webpack的智能解析器几乎可以处理任何第三方库
Loader加载器：webpack只能处理原生js模块，但是loader可以将各种资源转换为js模块
plugin插件：webpack有功能丰富的插件系统，满足各种开发需求
快速运行：webpack 使用异步 I/O 和多级缓存提高运行效率，使得它能够快速增量编译