vscode+nodejs+express搭建一个简单网站(附详细图文教程)

一、前期准备

1. 安装必备软件

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

2. 初始化项目文件夹

1. 创建一个项目文件夹（例如 express-simple-website），并通过 VSCode 打开该文件夹（VSCode 中点击「文件」-「打开文件夹」选择对应目录）。
2. 打开 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：

1. 在 VSCode 左侧资源管理器中，右键点击项目根目录，选择「新建文件」，命名为 index.js。
2. 复制以下代码到 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}`);
});

四、运行并访问网站

1. 启动服务

在 VSCode 内置终端中，输入以下命令（nodemon）运行 index.js 文件，启动 Express 服务：

也可以使用命令：node index.js

2. 验证服务启动

当我们看到有日志输出，就知道express已经运行成功了。

3. 访问网站

打开任意浏览器，在地址栏输入以下地址，即可访问搭建的网站：

• 根路径（首页）：http://localhost:3000

有人就问，我访问不想加端口咋办，打网址不加端口，其实是后台默认给你加上了80端口，

那就ok了，我们监听80端口就行。

没改端口前：

改端口后：

端口咋改啊（代码里面3000改成80，保存就完事了）：

注意看终端输出：

保存后它就自动重启了，为啥啊，因为我们用了nodemon，如果用的node index.js启动的，改完后得手动重启一下。

如果没有nodemon命令的，安装一下就可以了：

npm install -g nodemon

好了，完事了，网站框架也搭好了，想要内容丰富点，自个在里面加内容就行了。

总结

到此这篇关于vscode+nodejs+express搭建一个简单网站的文章就介绍到这了,更多相关vscode+nodejs+express搭建网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论