vscode+nodejs+express搭建一個簡單網(wǎng)站(附詳細圖文教程)

更新時間：2026年01月26日 09:42:49 作者：小新110

作為前端開發(fā),Nodejs已經(jīng)成了很多公司對我們這一崗位的硬性要求,而Express框架則是其中知名度最高、也是最受歡迎的Nodejs開發(fā)框架,這篇文章主要介紹了vscode+nodejs+express搭建一個簡單網(wǎng)站的相關資料,需要的朋友可以參考下

一、前期準備

1. 安裝必備軟件

Node.js：前往 Node.js 官網(wǎng) 下載對應系統(tǒng)（Windows/Mac/Linux）的 LTS 版本，安裝后打開終端（CMD/PowerShell/ 終端），輸入 node -v 和 npm -v，若能顯示版本號則說明安裝成功（npm 會隨 Node.js 一同安裝）。
VSCode：前往 VSCode 官網(wǎng) 下載安裝，無需額外配置，默認即可。

2. 初始化項目文件夾

創(chuàng)建一個項目文件夾（例如 express-simple-website），并通過 VSCode 打開該文件夾（VSCode 中點擊「文件」-「打開文件夾」選擇對應目錄）。
打開 VSCode 內(nèi)置終端（快捷鍵 `Ctrl+`` 或「終端」-「新建終端」），確保終端當前路徑為項目根目錄。

注意，此時的文件夾：

二、項目初始化與依賴安裝

1. 初始化 npm 項目

在終端中輸入以下命令，初始化一個 npm 項目（過程中可按回車默認配置，或按需填寫項目信息）：

npm init -y

執(zhí)行完成后，項目根目錄會生成 package.json 文件，用于管理項目依賴和配置。

注意查看，文件夾內(nèi)多了一個文件，就是package.json

我們看下package.json里面的內(nèi)容，注意后面的變化：

2. 安裝 Express 框架

Express 是 Node.js 的輕量級 Web 開發(fā)框架，輸入以下命令安裝（--save 可省略，npm 5+ 會自動將依賴寫入 package.json）：

npm install express

安裝完成后，項目根目錄會生成 node_modules 文件夾（存放依賴文件）和 package-lock.json 文件（鎖定依賴版本）。

安裝完，我們就可以在package.json文件中看到自動添加的依賴。

文件夾內(nèi)也可以看到添加了文件夾和一個文件：

在node_modules文件夾內(nèi)可以看到express的包，雙擊點進去：

接下來，就是寫代碼了：

三、編寫核心代碼（創(chuàng)建 Web 服務）

在項目根目錄下，創(chuàng)建一個入口文件（常規(guī)命名為 app.js 或 server.js，這里以 app.js 為例），這里我們建的是index.js：

在 VSCode 左側資源管理器中，右鍵點擊項目根目錄，選擇「新建文件」，命名為 index.js。
復制以下代碼到 index.js 中，代碼包含詳細注釋，便于理解：

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

// 2. 創(chuàng)建 Express 應用實例
const app = express();

// 3. 定義端口號（建議使用 3000、8080 等非系統(tǒng)默認端口）
const port = 3000;

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

app.listen(port,() => {
    // 服務啟動成功后，終端會輸出該提示信息
    console.log(`Express 網(wǎng)站已啟動，訪問地址：http://localhost:${port}`);
});