我的第一个前端（VS code ,Node , lite-server简易服务器，npm 运行）

第一种方式：使用Visual Studio Code创建并运行

第一个前端项目的步骤，如下：

1. 下载和安装Visual Studio Code：

访问Visual Studio Code官方网站（Visual Studio Code - Code Editing. Redefined）并根据你的操作系统下载安装程序。下载完成后，执行安装程序进行安装。

2. 安装Node.js：

前端项目通常使用Node.js作为JavaScript的运行环境和包管理工具。官方网站 https://nodejs.org 下载，下载适合你操作系统的LTS版本的Node.js。安装Node.js后，你可以在命令行中使用`node -v`命令检查安装是否成功。

3. 创建项目文件夹：

选择一个合适的位置，在你的计算机上创建一个文件夹来存放你的项目文件。

4. 在Visual Studio Code中打开项目文件夹：

点击Visual Studio Code的菜单栏中的"文件(File)"，选择"打开文件夹(Open Folder)"。在弹出的对话框中，选择你刚创建的项目文件夹，并点击"打开(Open)"。

5. 创建HTML文件：

在Visual Studio Code中，点击菜单栏的"文件(File)"，选择"新建文件(New File)"。在新建的文件中，输入以下HTML代码：

 

    


    
Hello, World!

6. 保存文件：

点击菜单栏的"文件(File)"，选择"另存为(Save As)"。在弹出的对话框中，选择你的项目文件夹，并命名为`index.html`。点击"保存(Save)"。index.html是默认的启动页面

7. 打开终端：

点击菜单栏的"终端(Terminal)"。这将在Visual Studio Code底部打开一个终端面板。转到项目的，比如: 我的项目在E盘html_project,就执行“cd E:\html_project”

8. 初始化项目：

在打开的终端中，运行以下命令来初始化你的项目：

npm init -y

这将在你的项目文件夹中创建一个默认的`package.json`配置文件。

9. 安装简易服务器：

在终端中运行以下命令来安装一个简易的服务器：

```bash

npm install --save-dev lite-server

```

这将在你的项目中安装`lite-server`作为开发依赖项。

10. 更新`package.json`的`scripts`字段：

打开`package.json`文件，将`scripts`字段更新为以下内容：

```json

"scripts": {

    "start": "lite-server"

}

```

这会在你运行`npm run start`命令时启动`lite-server`。

11. 运行项目：

在终端中运行以下命令，启动你的项目：

```bash

npm run start

```

这会执行你在步骤10中定义的`start`脚本，并启动服务器。或者自己在浏览器中访问` http://localhost:3000`，你应该能够看到你的前端项目在本地运行起来了。

通过以上步骤，你已经使用Visual Studio Code成功创建了第一个前端项目，并使用npm命令启动了项目。现在你可以继续开发和扩展你的项目，规范新增目录，添加更多的HTML、CSS和JavaScript代码。

第二种方式

在后端项目中附带的静态web项目

我的第一个后端项目(环境搭建，Springboot项目，运行，接口验证)_☆七年的博客-CSDN博客

创造价值，乐哉分享！776147358