我的第一个前端(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代码:

<!DOCTYPE html>
<html>
<head><title>My First Project</title>
</head>
<body><h1>Hello, World!</h1>
</body>
</html>

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  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17604.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java类的加载过程是什么?

本文重点 本文将学习类的加载过程,java命令将class文件放到类加载器中,那么之后经历了什么?本文将对其进行学习。 类加载方式? 两种加载方式:隐式加载(静态加载)和显式加载(动态加载) 隐式加载指的是在程序使用new等方式创建对象的时候,会隐式地调用类的加载器把…

【Docker】Docker的优势、与虚拟机技术的区别、三个重要概念和架构及工作原理详细讲解

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 作者简介&#xff1a; 辭七七&#xf…

驶向专业:嵌入式开发在自动驾驶中的学习之道

导语: 自动驾驶技术在汽车行业中的快速发展为嵌入式开发领域带来了巨大的机遇。作为自动驾驶的核心组成部分&#xff0c;嵌入式开发在驱动汽车的智能化和自主性方面发挥着至关重要的作用。本文将探讨嵌入式开发的学习方向、途径以及未来在自动驾驶领域中的展望。 一、学习方向:…

Java 解析Excel单元格的富文本

1. 总体介绍 该方法是解析 xlsx 单元格中的富文本&#xff0c;注意不是 xls&#xff0c;xls 的 api 不一样&#xff0c;试了很久没成功。只实现了解析 斜体字、上下标&#xff0c;其它的实现方式应该类似。 2. 具体实现 2.1 代码 package util;import java.io.FileInputStr…

人工智能安全-3-噪声数据处理

0 提纲 噪声相关概述噪声处理的理论与方法基于数据清洗的噪声过滤主动式过滤噪声鲁棒模型1 噪声相关概述 噪声类型: 属性噪声:样本中某个属性的值存在噪声标签噪声:样本归属类别关于噪声分布的假设:均匀分布、高斯分布、泊松分布等。 标签噪声的产生原因: (1)特定类别…

ERROR: transport error 202: gethostbyname: unknown host报错解决方案

Java 9 syntax for remote debugger: -agentlib:jdwptransportdt_socket,servery,suspendn,address*:5005Java 8 不适用 *:port&#xff0c;应该使用: -agentlib:jdwptransportdt_socket,servery,suspendn,address5005参考 https://stackoverflow.com/questions/50344957/ja…

C++ 文件流操作详解

1. C I/O流 本文章有很多内容参考并借鉴了《C primer plus》 这本经典。这里先说明一下。 1. C I/O流 1.1. 数据流1.2. 控制台流1.3. 文件流 1.3.1. 什么是文件流&#xff1f;1.3.2. 缓冲区1.3.3. 文件流和控制流的关系1.3.4. 文件处理1.3.5. 简单的文件I/O1.3.6. 流状态检查和…

Mysql-学习笔记

文章目录 1. 数据库1.1 Mysql安装及常用代码1.2 SQL介绍1.3 SQL分类1. DDL-操作数据库&#xff0c;表2. DML-对表中的数据进行增删改3. DQL-对表中的数据进行查询条件查询模糊查询排序查询分组查询分页查询 4. DCL-对数据库进行权限控制外键约束表关系-多对多多表查询事务 1. 数…

ETHERNET/IP转RS485/RS232网关什么是EtherNet/IP?

网络数据传输遇到的协议不同、数据互通麻烦等问题&#xff0c;一直困扰着大家。然而&#xff0c;现在有一种神器——捷米JM-EIP-RS485/232&#xff0c;它将ETHERNET/IP网络和RS485/RS232总线连接在一起&#xff0c;让数据传输更加便捷高效 那么&#xff0c;它是如何实现这一功能…

建木使用进阶-创建密钥管理

阿丹&#xff1a; 第一次我们进入建木&#xff0c;第一件事情就是配置我们相关的密钥。 解读&#xff1a; 在建木中我们可以进行创建密钥来对我们服务器等密码进行方便的管理。 注意&#xff1a; 登录的时候账号为&#xff1a;admin 密码为&#xff1a;123456 这是初始…

linux -网络编程一网络基本概念和Socket编程

目录 1 网络基础概念 1.1 协议 1.2分层模型 1.3 数据通信过程 1.4 网络应用程序的设计模式 1.5 以太网帧格式 1.6网络名词术语解析(自行阅读扫盲) 2 SOCKET编程 2.1 socket编程预备知识 2.2 socket编程主要的API函数介绍 目标&#xff1a; 了解OSI七层、TCP/IP四层模…

【vue】 前端vue2 全局水印效果

最近写项目遇到一个需求&#xff0c;全局显示水印&#xff0c;不管在哪个路由都要显示。 想要实现的效果&#xff1a; 新建shuiyin.js文件 // 定义水印函数 const addWatermark ({container document.body, // 水印添加到的容器&#xff0c;默认为 bodywidth "200px&…

MaxPatrol SIEM 增加了一套检测供应链攻击的专业技术

我们为 MaxPatrol SIEM 信息安全事件监控系统增加了一套新的专业技术。 该产品可帮助企业防范与供应链攻击相关的威胁。 此类攻击正成为攻击者的首要目标&#xff1a;它们以软件开发商和供应商为目标&#xff0c;网络犯罪分子通过他们的产品进入最终目标的基础设施。 因此&a…

新版塔罗占卜网站源码八字合婚风水起名附带搭建视频

新版塔罗占卜网站源码八字合婚风水起名PHP源码附带搭建视频,附带文本教学及视频教程安装方法以linux为例: 1、建议在服务器上面安装宝塔面板,以便操作,高逼格技术员可以忽略这步操作。 2、把安装包文件解压到根目录,同时建立数据库,把数据文件导入数据库 3、修改核心文件…

安达发|APS智能排程软件推动企业智能转型

随着智能化技术的飞速发展&#xff0c;企业在构建智能计划排产规划方面有了新的可能性。APS排程软件&#xff08;Advanced Planning and Scheduling&#xff09;作为一种强大的工具&#xff0c;为企业提供了实现智能计划排产规划的新模式&#xff0c;主要是利用计算机运算速度快…

无线电蓝牙音频-BES数字音频系统音频流图

+我V hezkz17进数字音频系统研究开发交流答疑群(课题组) (1)音乐播放音频流图 Decode"(解码)是指将编码后的数据转换回原始格式或可读取的形式的过程,SBC解码成PCM

06 HTTP(下)

06 HTTP&#xff08;下&#xff09; 介绍服务器如何响应请求报文&#xff0c;并将该报文发送给浏览器端。介绍一些基础API&#xff0c;然后结合流程图和代码对服务器响应请求报文进行详解。 基础API部分&#xff0c;介绍stat、mmap、iovec、writev。 流程图部分&#xff0c;描…

linux 安装FTP

检查是否已经安装 $] rpm -qa |grep vsftpd vsftpd-3.0.2-29.el7_9.x86_64出现 vsftpd 信息表示已经安装&#xff0c;无需再次安装 yum安装 $] yum -y install vsftpd此命令需要root执行或有sudo权限的账号执行 /etc/vsftpd 目录 ftpusers # 禁用账号列表 user_list # 账号列…

集成kisso框架springboot解决登录不了问题

前端使用 VUE 框架&#xff0c;要求请求头中传入 token值&#xff0c;获取设置token使用cookie操作 import Cookies from js-cookieconst TokenKey token-c export function getToken() {return Cookies.get(TokenKey) } export function setToken(token) {Cookies.set(Token…

html学习3(表格table、列表list)

1、html表格由<table>标签来定义。 <thead>用来定义表格的标题部分&#xff0c;其内部用 <th > 元素定义列的标题&#xff0c;可以使其在表格中以粗体显示&#xff0c;与普通单元格区分开来。<tbody>用来定义表格的主体部分&#xff0c;其内部用<t…