当前位置：首页 > news >正文

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

news 2026/6/12 18:22:54

一、前期准备

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中，代码包含详细注释，便于理解：

// 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}`); });