前端知识3.2nodejs安装以及初始化目录

解压zip包
配置环境变量安装目录以及node-global
npm -v
node -v 查看环境变量是否配置好
注意：配置好环境变量后，重新打开一个cmd否则会存在node不是内部命令的问题

npm install npm -g 在全局安装一下npm 这样的话在任何地方都可以使用npm

npm install jquery -g 就会安装到node-global目录下全局安装

npm install jquery 就会安装到用户目录的node_modules目录下。

npm -g install jquery@5.9.1 @后跟版本号可以更新jquery版本

npm config get registry 查看镜像
npm config set registry http://cmc-cd-mirror.rnd.huawei.com/npm 设置镜像

淘宝镜像：npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

npm config get registry 如果发现没有切换为淘宝源
就执行这个命令:npx nrm use taobao

npm的基本使用
npm -v 通过查看版本看npm是否安装成功
npm install modename 使用npm 命令安装模块
npm install modename -g 全局安装
npm list -g 查看所有全局安装的模块
npm list vue 查看某个模块的版本号

npm -g install npm@5.9.1 指定版本下载

npm install -save moduleName #-save 在package.json文件的dependencies 节点写入依赖
npm install --save -dev moduleName #–save -dev在package.json文件的devdependencies 节点写入依赖

dependencies：运行时的依赖，发布后，即生产环境下还需要用到的模块

devdependencies:开发时的依赖，里面的模块式开发使用的，发布时用不到他，比如项目中使用的gulp，压缩css/js的模块这些模块在我们的项目中，部署后是不需要的。

npm update jquery 更新jquery的最新版本

npm uninstall jquery 写在jquery这个包

新建一个目录
npm init --yes /npm init -y
会生成 package.json文件: 默认内容为：
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dir”:“dir”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

其中scripts就是脚本：在终端输入 npm run test 命令就会报Error: no test specified" && exit 1

在script中加入： “dir”:“dir” 在终端输入 npm run dir命令就会列出当前目录的文件

执行 npm install jquery 相当于 npm install jquery -g
就会在当前的node_modules目录中下载jquery。同时在package.json 文件中的dependencies对象中有"jquery":"^3.6.0" 同时生成package-lock.json文件：
{
“name”: “demo”,
“version”: “1.0.0”,
“lockfileVersion”: 2,
“requires”: true,
“packages”: {
“”: {
“name”: “demo”,
“version”: “1.0.0”,
“license”: “ISC”,
“dependencies”: {
“jquery”: “^3.6.0”
}
},
“node_modules/jquery”: {
“version”: “3.6.0”,
“resolved”: “https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz”,
“integrity”: “sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==”
}
},
“dependencies”: {
“jquery”: {
“version”: “3.6.0”,
“resolved”: “https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz”,
“integrity”: “sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==”
}
}
}
package.json的变化：
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dir”: “dir”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: { //这里有变化
“jquery”: “^3.6.0”
}
}

执行 npm i bootstrap -D 相当于 npm install bootstrap --save -dev
两个文件的变化如下：
package.json的变化：
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dir”: “dir”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“jquery”: “^3.6.0”
},
“devDependencies”: { //这里有变化
“bootstrap”: “^5.1.3”
}
}

package-lock.json
{
“name”: “demo”,
“version”: “1.0.0”,
“lockfileVersion”: 2,
“requires”: true,
“packages”: {
“”: {
“name”: “demo”,
“version”: “1.0.0”,
“license”: “ISC”,
“dependencies”: {
“jquery”: “^3.6.0”
},
“devDependencies”: {
“bootstrap”: “^5.1.3”
}
},
“node_modules/@popperjs/core”: {
“version”: “2.11.0”,
“resolved”: “https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz”,
“integrity”: “sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==”,
“dev”: true,
“peer”: true,
“funding”: {
“type”: “opencollective”,
“url”: “https://opencollective.com/popperjs”
}
},
“node_modules/bootstrap”: {
“version”: “5.1.3”,
“resolved”: “https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz”,
“integrity”: “sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==”,
“dev”: true,
“funding”: {
“type”: “opencollective”,
“url”: “https://opencollective.com/bootstrap”
},
“peerDependencies”: {
“@popperjs/core”: “^2.10.2”
}
},
“node_modules/jquery”: {
“version”: “3.6.0”,
“resolved”: “https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz”,
“integrity”: “sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==”
}
},
“dependencies”: {
“@popperjs/core”: {
“version”: “2.11.0”,
“resolved”: “https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz”,
“integrity”: “sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==”,
“dev”: true,
“peer”: true
},
“bootstrap”: {
“version”: “5.1.3”,
“resolved”: “https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz”,
“integrity”: “sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==”,
“dev”: true,
“requires”: {}
},
“jquery”: {
“version”: “3.6.0”,
“resolved”: “https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz”,
“integrity”: “sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==”
}
}
}

删除当前的node_modules目录中所有的依赖，然后执行 nip install 就会自动下载下来。这个作用就是把自己的项目给别人由于node_modules的目录太大就不给别人了，别人拿到项目的其他文件后执行npm install 就可以下载了依赖了。原理就是
npm install 会找package.json文件下载该文件记录的依赖。

其中注意：package.json的dependecies中：
记录插件的版本是这种^5.1.3写法。表示在npm install的时候会下载该插件的以5开头的最新版本。

如果是这种写法：~5.1.3表示在npm install的时候会下载该插件的5.1开头的最新版本

如果是这种写法：5.1.3 表示会永远下载5.1.3这个版本。

package-lock.json文件的作用就是记录依赖的真是版本。

前端知识3.2nodejs安装以及初始化目录相关推荐

前端学习（2994）：vue+element今日头条管理--初始化目录结构
初始化目录结构
layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
从输入URL到页面加载的过程？由一道题完善自己的前端知识体系！
梳理主干流程这道题上,如何回答呢?先梳理一个骨架. 知识体系中,最重要的是骨架,脉络.有了骨架后,才方便填充细节.所以,先梳理下主干流程: 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览 ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
历时8个月，10w字！前端知识体系+大厂面试笔记（工程化篇）
前言本文是10w字前端知识体系+大厂面试总结的第三篇其余3篇为基础知识篇.算法篇.前端框架和浏览器原理篇,如果还没有阅读,建议了解下工程化目的是为了提升团队的开发效率.提高项目的质量例如 ...
【项目相关技术】前端由来、vscode安装使用、ECMAScript 6、Vue、element-ui、Node.js、npm、模块化、WebPack
前端开发的由来? vscode安装和使用 sda ①.下载地址:[https://code.visualstudio.com/](https://code.visualstudio.com/) sda ...
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
前端知识体系-全栈系列（图谱+大纲）
源文件地址: https://download.csdn.net/download/gongch0604/86860161 前端知识体系(图谱) 前端工程化体系 node 主流技术栈大纲 React ...
mysql安装后第一次操作_MySQL数据库之mysql 安装成功以及第一次安装成功初始化密码操作...
本文主要向大家介绍了MySQL数据库之mysql 安装成功以及第一次安装成功初始化密码操作 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 一把文件解压到一个目录下技术分享图 ...

前端知识3.2nodejs安装以及初始化目录

前端知识3.2nodejs安装以及初始化目录相关推荐

最新文章

热门文章