如何在 Visual Studio Code 编辑器中创建并运行 Node.js 项目？

Visual Studio Code (VS Code) 是一个功能强大且用户友好的代码编辑器，广泛应用于 Web 开发领域。它内置了诸如语法高亮、代码提示和扩展程序等功能，让编程变得更加轻松。在本文中，我们将向您展示如何使用 VS Code 快速创建并运行一个 Node.js 项目。

前置准备：

• 如何在 Windows 上安装 Visual Studio Code？
• 如何下载和安装 Node.js 和 NPM？

在 VS Code 编辑器中创建并运行 Node.js 项目的步骤

Step 1: 创建一个新的项目目录

首先创建一个空文件夹，然后使用 VS Code 编辑器进入该文件夹。我们可以使用以下命令来完成这一步。

mkdir demo
cd demo
code .

!创建新项目目录的终端代码

Step 2: 现在，在您的文件夹中创建一个 app.js 文件，如下图所示。

!App.js 文件

Step 3: 安装模块

我们可以使用以下命令来安装所需的模块。

npm install express
npm install nodemon

• express 是 Node.js 的 Web 应用框架。
• nodemon 是一个可选的工具，它能在代码发生变化时自动重启您的应用程序（这对开发非常有用）。

Step 4: 修改 Package.json 文件

• 打开 package.json 文件（在运行 npm init 或安装任何模块后，该文件通常会自动创建）。

• 在 scripts 部分添加以下命令，以便运行应用程序：

"scripts": {
  "start": "node app.js",
  "dev": "nodemon app.js"
}

package.json 文件的配置：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "dev": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^5.1.0",
    "nodemon": "^3.1.9"
  }
}

Step 5: 项目结构

以下是项目的结构：

!Node JS 项目结构

Step 6: 在 app.js 文件中写入以下代码

JavaScript


CODEBLOCK_17283b5f


Step 7: 使用以下命令运行应用程序

让我们回到终端，运行以下命令以使用 nodemon 启动服务器：

npm run dev

• npm run dev 将运行服务器，并在您进行更改时自动重启它。

输出结果：

!终端输出

Step 8: 在浏览器中打开

现在，在浏览器中访问 http://localhost:5000/，您将会看到以下输出：

!浏览器输出