vscode+nodejs+express 搭建一个简单网站

一、前期准备

1. 安装必备软件

Node.js ：前往 Node.js 官网下载对应系统（Windows/Mac/Linux）的 LTS 版本，安装后打开终端（CMD/PowerShell/ 终端），输入 node -v 和 npm -v，若能显示版本号则说明安装成功（npm 会随 Node.js 一同安装）。
VSCode ：前往 VSCode 官网下载安装，无需额外配置，默认即可。

2. 初始化项目文件夹

创建一个项目文件夹（例如 express-simple-website），并通过 VSCode 打开该文件夹（VSCode 中点击「文件」-「打开文件夹」选择对应目录）。
打开 VSCode 内置终端（快捷键 `Ctrl+`` 或「终端」-「新建终端」），确保终端当前路径为项目根目录。

注意，此时的文件夹：

二、项目初始化与依赖安装

1. 初始化 npm 项目

在终端中输入以下命令，初始化一个 npm 项目（过程中可按回车默认配置，或按需填写项目信息）：

复制代码

npm init -y

执行完成后，项目根目录会生成 package.json 文件，用于管理项目依赖和配置。

注意查看，文件夹内多了一个文件，就是package.json

我们看下package.json里面的内容，注意后面的变化：

2. 安装 Express 框架

Express 是 Node.js 的轻量级 Web 开发框架，输入以下命令安装（--save 可省略，npm 5+ 会自动将依赖写入 package.json）：

复制代码

npm install express

安装完成后，项目根目录会生成 node_modules 文件夹（存放依赖文件）和 package-lock.json 文件（锁定依赖版本）。

安装完，我们就可以在package.json文件中看到自动添加的依赖。

文件夹内也可以看到添加了文件夹和一个文件：

在node_modules文件夹内可以看到express的包，双击点进去：

接下来，就是写代码了：

三、编写核心代码（创建 Web 服务）

在项目根目录下，创建一个入口文件（常规命名为 app.js 或 server.js，这里以 app.js 为例），这里我们建的是index.js：

在 VSCode 左侧资源管理器中，右键点击项目根目录，选择「新建文件」，命名为 index.js。
复制以下代码到 index.js 中，代码包含详细注释，便于理解：

cpp 复制代码

// 1. 引入 Express 模块
const express = require('express');

// 2. 创建 Express 应用实例
const app = express();

// 3. 定义端口号（建议使用 3000、8080 等非系统默认端口）
const port = 3000;

// 4. 配置路由：处理 GET 请求，根路径（http://localhost:3000/）
app.get('/',(req,res)=>{
    res.send('Hello World!');
});

app.listen(port,() => {
    // 服务启动成功后，终端会输出该提示信息
    console.log(`Express 网站已启动，访问地址：http://localhost:${port}`);
});