前端项目练习(练习-002-NodeJS项目初始化)

首先,创建一个web-002项目,内容和web-001一样。

下一步,规范一下项目结构,将html,js,css三个文件放到  src/view目录下面:

由于html引入css和js时,使用的是相对路径,所以三个文件的内容都不用修改。

注意,下一步关键,是将项目初始化为nodejs项目。

什么是 node?官方原话:一个基于 Chrome V8 解析引擎的 JavaScript 运行时环境。

换句话说: 把浏览器内的 JS 解析引擎拿出来, 和其它内容进行了一个组装,变成了一个新的东西。 起了个名字叫做 'NodeJS'。

Node.js是目前非常火热的技术,它借助JavaScript天生的事件驱动机制加V8高性能引擎,使编写高性能Web服务轻而易举。

其次,JavaScript语言本身是完善的函数式语言,在前端开发时,开发人员往往写得比较随意,让人感觉JavaScript就是个“玩具语言”。但是,在Node环境下,通过模块化的JavaScript代码,加上函数式编程,并且无需考虑浏览器兼容性问题,直接使用最新的ECMAScript 6标准,可以完全满足工程上的需求。

现在想要成为前端工程师,NodeJS是绕不过去的,所以,学就行了。

要将项目初始化为nodejs项目,首先要安装nodejs。官网地址是:Node.js

根据自己的操作系统,下载稳定版安装即可。

注意:在Windows上安装时务必选择全部组件,包括勾选Add to Path

安装完成后,可以输入  node -v  查看版本:

nodejs安装完成后,还有一个命令,npm,

npm是什么?npm其实是Node.js的包管理工具(package manager)。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。

可以看到,和Java的Maven很像。

更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。

下面开始正式初始化项目为nodejs项目,进入项目根目录,执行  npm init 命令:

可以看到,需要输入一个参数package name,项目的名字,默认就是文件夹的名字 web-002,如果要使用默认值,直接按回车即可,就会看到下一个参数的输入:

下一个参数version是版本号,默认值是1.0.0,如果使用默认值按回车即可,进入下一个,

等等等等。。。。。。

在运行npm init指令时,会提示你输入一系列的参数,包括:

1. package name: 包的名称。默认为当前文件夹的名称。

2. version: 包的版本号。默认为1.0.0。

3. description: 包的描述。

4. entry point: 包的入口文件。默认为index.js。

5. test command: 测试包的指令。默认为“test”。

6. git repository: Git仓库地址。

7. keywords: 关键词,用于搜索包。

8. author: 包的作者。

9. license: 包的许可证类型。默认为ISC。

第一个nodejs项目,我们全部使用默认值,一路回车即可:

注意:如果想全部使用默认值,又懒得一路回车,可以直接使用 npm init -y 命令

初始化完成后,可以看到项目根目录下面多了一个 package.json 文件:

什么是package.json文件

package.json是一个基于JSON格式的文件,用于描述Node.js项目中所需的模块以及项目的元数据。它是一个非常重要的文件,几乎所有Node.js项目都需要一个package.json来维护其依赖性和元数据。在Node.js项目中,通过使用 npm 来管理项目的所有依赖关系,而npm又通过读取package.json来确定需要安装哪些依赖包和各个依赖包的版本等信息。

来看一下package.json文件的内容:

目前都是初始化项目时的默认参数,没有其他内容。

其中的 scripts 需要注意,这里是项目中定义的可以执行的指令,使用  npm run 执行,目前定义了一个可以执行的指令,是 test ,那么执行指令的命令就是  npm  run  test  ,后面的内容是

"echo \"Error: no test specified\" && exit 1"  ,表示打印一行字符串,并退出。执行效果如下:

图中圈住的部分,就是执行的结果。后面跟了一个  exit 1  ,代表非正常运行导致退出程序。

exit 0 代表正常运行程序并退出程序,
exit 1 代表非正常运行导致退出程序

我们也可以把这里换成中文输出:

执行效果如下:

还可以手动增加一条指令build:

执行效果如下:

上面就是NodeJS初始化的过程。

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

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

相关文章

详解C语言—文件操作

目录 1. 为什么使用文件 2. 什么是文件 3. 文件的使用 文件指针 文件的打开和关闭 三个标准的输入/输出流: 4. 文件的顺序读写 对字符操作: fputc: fgetc: 练习复制整个文件: 对字符串操作:…

WebGL雾化

目录 前言 如何实现雾化 线性雾化公式 雾化因子关系图 根据雾化因子计算片元颜色公式 示例程序(Fog.js) 代码详解​编辑 详解如何计算雾化因子(clamp()) 详解如何计算最终片元颜色(根据雾化因子计算片元颜色…

搭建自己的搜索引擎之四

一、前言 搭建自己的搜索引擎之三 介绍了通过HTTP RESTful 对ES进行增删改查,这一般手工运维ES时使用,程序代码中最好还是使用Java API去操作ES会更容易维护,但ES API竟然贼多,本篇介绍一下 四种 API及其简单使用。 注&#xff…

第1篇 目标检测概述 —(2)目标检测算法介绍

前言:Hello大家好,我是小哥谈。目标检测算法是一种计算机视觉算法,用于在图像或视频中识别和定位特定的目标物体。常见的目标检测算法包括传统的基于特征的方法(如Haar特征和HOG特征)以及基于深度学习的方法&#xff0…

Docker(三)、Dockerfile探究

Dockerfile探究 一、镜像层概念1、通过执行命令显化docker的机制 二、Dockerfile基础命令1、FROM 基于基准镜像【即构建镜像的时候,依托原有镜像做拓展】2、LABEL & MAINTAINER -说明信息3、WORKDIR 设置工作目录4、ADD & COPY 复制文件5、ENV 设置环境常量…

crypto:Alice与Bob

题目 根据题目描述,将98554799767分解成两个素数 得到两个素数101999和966233。根据题目提示把它们拼接起来进行md5的32位小写哈希

提升您的Mac文件拖拽体验——Dropzone 4 for mac

大家都知道,在Mac上进行文件拖拽是一件非常方便的事情。然而,随着我们在工作和生活中越来越多地使用电脑,我们对于这个简单操作的需求也越来越高。为了让您的文件拖拽体验更加高效和便捷,今天我们向大家介绍一款强大的工具——Dro…

[plugin:vite:css] [sass] Undefined mixin.

前言: vite vue3 TypeScript环境 scss报错: [plugin:vite:css] [sass] Undefined mixin. 解决方案: 在vite.config.ts文件添加配置 css: {preprocessorOptions: {// 导入scss预编译程序scss: {additionalData: use "/resources/_ha…

8章:scrapy框架

文章目录 scrapy框架如何学习框架?什么是scarpy?scrapy的使用步骤1.先转到想创建工程的目录下:cd ...2.创建一个工程3.创建之后要转到工程目录下4.在spiders子目录中创建一个爬虫文件5.执行工程setting文件中的参数 scrapy数据解析scrapy持久…

计算机视觉与深度学习-循环神经网络与注意力机制-RNN(Recurrent Neural Network)、LSTM-【北邮鲁鹏】

目录 举例应用槽填充(Slot Filling)解决思路方案使用前馈神经网络输入1-of-N encoding(One-hot)(独热编码) 输出 问题 循环神经网络(Recurrent Neural Network,RNN)定义如何工作学习目标深度Elm…

uniapp ssr发行后一直Hydration completed but contains mismatches Cannot find module

最开始我用前端网页托管的地址访问一直是 Hydration completed but contains mismatches 解决方案 要从云函数的地址访问项目。 先绑定域名,否则用uniapp自带地址访问一直是下载文件 设置路径 最后效果 uniapp ssr 云函数访问 MODULE_NOT_FOUND:Cannot fin…

2023 年 Bitget Wallet 测评

对Bitget Wallet钱包的看法 Bitget Wallet在安全性、产品实力和使用体验方面可与Metamask媲美,甚至有所超越,唯一稍显不足的是知名度稍逊一筹。在众多钱包中,Bitget Wallet是拥有最全面的钱包之一,尤其适合那些希望一步到位&…

最小生成树 | 市政道路拓宽预算的优化 (Minimum Spanning Tree)

任务描述: 市政投资拓宽市区道路,本着执政为民,节省纳税人钱的目的,论证是否有必要对每一条路都施工拓宽? 这是一个连问带答的好问题。项目制学习可以上下半场,上半场头脑风暴节省投资的所有可行的思路&a…

web:[极客大挑战 2019]Upload

题目 页面显示为一个上传&#xff0c;猜测上传一句话木马文件 先查看源代码看一下有没有有用的信息&#xff0c;说明要先上传图片&#xff0c;先尝试上传含有一句话木马的图片 构造payload <?php eval($_POST[123]);?> 上传后页面显示为&#xff0c;不能包含<&…

“益路同行”栏目专访第11期——柳州市雨花敬老服务中心陈勇梅

中国善网在本届&#xff08;第十届&#xff09;慈展会上特别推出了《益路同行》采访栏目&#xff0c;《益路同行》栏目旨在寻觅公益之路上同行者的故事&#xff0c;挖掘公益更深层次的内涵&#xff0c;探索新时代公益发展道路。希望公益企业、人物、故事被更多人看到&#xff0…

2.物联网射频识别,RFID通信原理,RFID读写器与标签无线交互方式、数据反馈方式,RFID调制与解调、编码方式,不同RFID标签与读写器

一。RFID无线识别的原理 1.RFID系统无线通信基本原理 如下图所示&#xff0c;左边是读写器&#xff08;刷卡器&#xff09;&#xff0c;右边是标签&#xff08;卡&#xff09;&#xff0c;中间通过无线通信方式。 标签&#xff1a;&#xff08;卡&#xff09; 读写器&#xff…

实战项目:VB实现小鸟快跑小游戏

文章目录&#xff1a; 一&#xff1a;效果演示 二&#xff1a;实现思路 三&#xff1a;代码实现 form1 效果图 代码 form2 效果图 代码 一&#xff1a;效果演示 效果图◕‿◕✌✌✌ 代码下载 二&#xff1a;实现思路 窗口1 就是实现窗口的跳转和关闭窗口2 1.先添加背…

CSS详细基础(三)复合选择器

前两章介绍了CSS中的基础属性&#xff0c;以及一些基础的选择器&#xff0c;本贴开始介绍复合选择器的内容~ ​ 在 CSS 中&#xff0c;可以根据选择器的类型把选择器分为基础选择器和复合选择器&#xff0c;复合选择器是建立在基础选择器之上&#xff0c;对基本选择器进行组合形…

ElementUI之动态树+数据表格+分页

目录 前言 一.ElementUI之动态树 1.前端模板演示 2.数据绑定 2.1 通过链接获取后台数据 2.2 对链接进行绑定 2.3添加动态路由 2.4 配置路由 3.效果演示 二.数据表格动态分页 1.前端模板 2.通过JS交互获取后端数据 3 效果演示 前言 Element UI 是一个基于 Vue.js 的开…

IDEA Debug技巧大全,看完就能提升工作效率

作者简介 目录 1.行断点 2.方法断点 3.异常断点 4.字段断点 5.条件表达式 1.行断点 行断点就是平时我们在代码行旁边单击鼠标打上的断点&#xff0c;这个没有什么好说的。关键点在于很多人不知道的&#xff0c;行断点其实是可以右击选择是对改行的全部调用都生效&#xf…