Vue 学习(五、扩展 - 安装 Node.js 运行环境和 NPM 操作总结)

2021-12-12 20:57:12

文章目录

一、疑问总结
- 1. 什么是 Node.js
- 2. 学 Vue 为什么要安装 Node.js
一、安装 Node.js 运行环境
- 1. 安装 Node
- 2. 配置 NPM
二、NPM 操作总结

一、疑问总结

1. 什么是 Node.js

1）前端和服务端的理解

一门技术语言，它属于前端还是服务端，这个不是绝对的，同一门技术在不同的项目中，定位是不同的，通常习惯
用程序的运行位置，来定义它在项目中的定位，如用 Java 开发的 Android 和 Restful API，因 Android 运行在客户端，
所以此时 Java 的定位就是前端，而 Restful API 因为运行在服务器，所以对它的定位就是服务端

2）Node.js 的作用

一提到 Javascript，潜意识里就会把它定位成前端技术，这是错误的，就像前面说的，语言本身没有定位，它的定
位取决于项目，而造成这种错觉的原因，是因为 Javascript 程序总是运行在客户端浏览器中

Javascript 之所以一直离不开浏览器，是因为曾经只有浏览器中才有 Javascript 的执行引擎，而 Node.js 是一个
可以脱离浏览器安装的 Javascript 运行环境，内嵌谷歌浏览器同款 Javascript 执行引擎 - V8，有了 Node.js 我们就
不再必须依赖浏览器运行 Javascript 程序，在任何有 Node.js 环境的地方都可以运行脚本，达到服务端使用的效果

2. 学 Vue 为什么要安装 Node.js

可能会有疑问，我们在学习 Vue，为什么要安装 Node.js 运行环境？其实 Vue 和 Node 是没什么关系的，但之前说
过，使用 Vue 搭配 Webpack 可以更好的实现前端工程化，这也是我们最后的目标，而 Webpack 的配置文件为 JS 格式，
它需要服务器端执行，执行后才能打包出我们最后的目标文件，所以 Webpack 是依赖 Node 环境的

一、安装 Node.js 运行环境

1. 安装 Node

1) 下载：直接打开 NodeJS 官网，就可以下载，我一般喜欢下载 msi 格式，如果选择
zip 格式的话，后期需要自己手动添加系统环境变量啥的，有点麻烦：
2) 安装：有些 Win10 系统，对 msi 格式文件，以双击打开的方式进行安装时，会出现错误码为 2503 或 2502 的
异常，所以我推荐使用 msiexec /package msi 文件路径 命令打开 msi 格式文件，具体步骤如下：

① 以管理员身份打开 cmd 命令行

② 执行 msiexec /package msi 文件路径 命令，打开 msi 文件
Vue 学习(五、扩展 - 安装 Node.js 运行环境和 NPM 操作总结)
③ 执行上面命令后，会弹出安装 Node 的安装窗口，然后开始常规的傻瓜式安装

欢迎页，直接 “Next”

选接受，然后 “Next”

选择要安装的位置，然后 “Next”

确认一下要按的东西，然后 “Next”

选中后直接 “Next”，勾选后，在安装的最后会弹出一个命令行窗口

点 “Install” 开始正式安装

安装完成

弹出的命令行窗口，按回车就行，后面还会弹出一个命令行窗口，整个过程会久一点，每过一段时间就需要看看
窗口中的内容，因为经常就不动了，需要按回车让其继续运行

等都安装完毕后，在 cmd 中输入node -v 命令，如果出现类似如下的画面，代表安装成功

2. 配置 NPM

npm 简介

在 Node 安装的过程中，会为我们安装一个叫 NPM 的插件，其全名为 node package manage，既 Node 包管理器,
NPM 将项目抽象为包的概念，凡是项目中有 package.json 文件的，都可以被视为一个包，可以让 NPM 去管理

使用 NPM 可以将自定义的包上传到 NPM 服务器，也可以从 NPM 服务器下载第三方包，现在主流的库或框架基本
都有 NPM 的版本，如 jQuery，Vue 等，具体可以去 NPM 官网搜索

使用 NPM，就不再需要四处下载项目依赖的 JS 文件，而是统一在 NPM 服务器下载，共享项目时，也不需要把依
赖的文件上传，只要把需要的依赖写在 package.json 中，然后通过 NPM 下载就可以

验证 npm 是否安装

可以在 cmd 中输入npm -v 命令，来验证 npm 是否安装成功

修改 npm 默认路径

1）全局目录：

npm 默认的全局目录为 C:\Users\Administrator\AppData\Roaming\npm 和 C:\Users\Administrator\AppData\Roaming\npm_cache ，
所有全局安装的包和相关缓存，都在这两个文件夹中

我们可以将全局目录地址修改，打开 cmd，使用 npm config set prefix 目录 和 npm config set cache 目录 命令修改

2）npm 服务器地址：

通过 npm 下载安装时，默认链接的服务器地址是，https://registry.npmjs.org/ ，因为国内访问外网不太稳定，所以
有时需要进行一切处理

常见的处理方式有两种：

① 通过 npm 下载阿里自己定制的，类似 npm 的工具 - cnpm
我个人不太喜欢这种方式，因为下载 cnpm 后，为了使用 cnpm 命令，还要把其加入到系统环境变量中，虽然
使用方式和 npm 一样，只不过把 npm 替换成 cnpm，但是习惯了写 npm，很容易忘记改成 cnpm

cnpm 安装方式： npm install -g cnpm --registry=https://registry.npmmirror.com

② 修改默认的服务器地址，修改方式：npm config set registry=https://registry.npmmirror.com

不管是修改全局目录地址还是修改默认服务器地址，npm 都会把我们设置的信息，记录到文件中，所以我们也可以通过
查看该文件，来确定是否设置成功，文件地址为 C:\Users\Administrator\.npmrc

二、NPM 操作总结

npm 的全部使用方式可以通过 npm -help 命令查看, 然后自行查阅资料学习，此处我只列举一些常用的

1. package.json 文件

不管是第三方包，还是自定义包，想被 npm 命令识别，就必须包含 package.json 文件，这个文件中可以声明
包的详细信息、所依赖的其他包、以及 npm run 命令执行的脚本等

1）创建 package.json 文件

建议使用命令创建 package.json 文件，最起码能有个基本格式：
在目录中使用终端，运行 npm init 或 npm init -y，前面方式可以在创建时填一些项目信息，后一种则直接创建

2）package.json 格式分解

先看一个比较完整的 package.json 格式：

{
  "name": "name",
  "version": "2.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "test": "test command"
  },
  "repository": {
    "type": "git",
    "url": "git "
  },
  "keywords": [
    "keyword"
  ],
  "author": "ares5k",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "babel": "^6.23.0"
  }
}

格式分解：

属性	描述
name	项目包名 (小写英文、数字、下划线、短横线)
version	项目包版本 (要求格式为 x.x.x)
description	项目包描述
main	项目入口文件路径（方便模块化导入，导入时直接写包名就可以，不然需要写类似这种结构：包名/dist/入口文件.js）
scripts	自定义命令，使用 [ npm run 自定义命令名] 来运行指定命令
repository	指定本项目存放的仓库类型和地址
keywords	搜索用的关键字
author	作者
license	指定开源协议类型 (开源协议列表)
dependencies	生产环境依赖的第三方包列表
devDependencies	开发环境依赖的第三方包列表

2. 包的安装和下载

对本地已有包，进行安装：

场景：我们已有项目包，但是想安装其 package.json 中的依赖

在 package.json 文件的同级目录运行终端命令：

npm install - 将 package.json 中 dependencies 和 devDependencies 指定的依赖全部安装
npm install --production 只安装 dependencies 中的依赖

从 NPM 服务器下载包：

场景：我们需要从 NPM 服务器下载需要的第三方依赖包

1) 下载到全局的三种方式：

npm install 包名@版本号 -global
npm install 包名@版本号 -g
npm install 包名@版本号
npm i 包名（默认安装最新版）

以安装 jQuery 包为例：

npm install jquery@3.6.0 -g

2) 下载到局部的三种方式（生产版本依赖包）：

npm install 包名@版本号 --save
npm install 包名@版本号 --s
npm i 包名 --s （默认安装最新版）

以安装 jQuery 包为例：

npm install jquery@3.6.0 --s

3) 下载到局部的三种方式（开发版本依赖包）：

npm install 包名@版本号 --save-dev
npm install 包名@版本号 --D
npm i 包名 --D （默认安装最新版）

以安装 jQuery 包为例：

npm install jquery@3.6.0 --D

下载到全局：
前面说过，有 package.json 文件的项目就可以视为包，所以一些命令工具也可以封装成包，比较有代表的就是 cnpm 一般
这种的都会下载到全局，配置系统变量后，可以方便所有项目使用其命令

下载到局部：
下载到局部的时候，首先包会下载到 package.json 文件的同级目录中，然后会把依赖信息添加到 package.json 文件的
dependencies 或 devDependencies 中，当项目共享给其他人时，别人可以根据该 package.json 文件下载对应依赖

dependencies 和 devDependencies
dependencies 是生产环境相关的依赖（能保证项目正确运行的依赖），devDependencies 是开发环境相关的依赖
（打包、测试相关的），其实这就是个不成文的规定。

3. 其他命令

1）包的更新

命令：npm update 包名，以 jQuery 为例：npm update jquery

2）包的卸载

命令：npm uninstall 包名，以 jQuery 为例：npm uninstall jquery

3）以安装的列表

当前项目安装列表，在 package.json 文件的同级目录使用：npm list
全局安装列表，在任意处使用终端命令：npm list -g

4）npm 配置表
命令：npm config list- l

5）执行 package.json 文件的 script 自定义命令

npm run 执行 script 中的所有命令
npm run 命令名 执行 script 中指定名称的命令

例：

在 package.json 文件中，自定义一个名字为 dev 的命令

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "echo execute dev"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

终端运行自定义的 dev 命令：

码农公寓

文章目录

一、疑问总结

1. 什么是 Node.js

2. 学 Vue 为什么要安装 Node.js

一、安装 Node.js 运行环境

1. 安装 Node

2. 配置 NPM

二、NPM 操作总结

1. package.json 文件

2. 包的安装和下载

3. 其他命令

相关文章