目录/Contents:

了解Node.js

Node.js 中文网、英文官网首页放了这句话

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

运行时，即编程语言的运行环境

NodeJS 对 JS 扩展，使得JS可以脱离浏览器，直接运行在物理机器上，也就是说NodeJS可以直接管理、控制机器资源了

下载安装Node

直接上官网下载对应的版本安装即可

验证安装是否成功，可以使用命令行

 C:\Users\mild>node -v v16.15.1

Node hello world

打开命令行、node，如下

 C:\Users\mild>node Welcome to Node.js v16.15.1. Type ".help" for more information. > console.log("hello world") hello world undefined >

退出node

有如下三种方式

 > (To exit, press Ctrl+C again or Ctrl+D or type .exit)

双击 Ctrl C

Ctrl D

.exit

`NPM——（npm，Node Package Manager）`

就像maven、gradle之于 Java

pip之于python

Nuget之于C++

npm 是随 node 一起发布的包管理工具，常被用来下载开箱即用的代码，然后在个人项目中使用

查看npm版本

 > npm -v

`package.json`

就像pom.xml之于使用maven 管理的 Java项目

就像setup.py描述Python项目中使用的第三方库

package.json 用于描述和管理Node项目中使用的插件、依赖

生成一个package.json

命令

 npm init

或者使用

 npm init -y

举例

C:\Users\mild\Desktop\codings\test>npm init npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.  See `npm help init` for definitive documentation on these fields and exactly what they do.  Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file.  Press ^C at any time to quit. package name: (test) version: (1.0.0) description: It is a test init entry point: (index.js) test command: git repository: keywords: author: Ading license: (ISC) About to write to C:\Users\mild\Desktop\codings\test\package.json:  {   "name": "test",   "version": "1.0.0",   "description": "It is a test init",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "Ading",   "license": "ISC" }   Is this OK? (yes) npm notice npm notice New minor version of npm available! 8.11.0 -> 8.15.1 npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1 npm notice Run npm install -g npm@8.15.1 to update! npm notice  C:\Users\mild\Desktop\codings\test>

生成的package.json

 {   "name": "test",   "version": "1.0.0",   "description": "It is a test init",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "Ading",   "license": "ISC" }

文件中的"scripts" 是一个JSON对象，可在其中自定义npm命令

{ "test": "echo "Error: no test specified" && exit 1" },

`npm install`

安装第三方库的语法

 npm install <package-name>

通常会在此命令中用到如下参数：

--save 安装并添加条目到 package.json 文件的 dependencies
--save-dev 安装并添加条目到 package.json 文件的 devDependencies

因为 package.json 将依赖分为如下两种

devDependencies 通常是开发的工具（例如测试的库）
dependencies 则是与生产环境中的应用程序相关

npm install -g 全局模式安装，对于被很多项目引用的模块，建议使用 -g

`node_modules`

若只是运行npm install

则npm根据 package.json 中描述的依赖进行安装，安装到 当前文件夹/node_modules

（以非全局模式安装的模块，都会在 当前文件夹/node_modules)

那么以全局模式安装的，又会安装到哪里呢？

这个需要查看

npm config get prefix

 C:\Users\mild>npm config get prefix C:\software\nodejs\npm_installation_path\node_global

看到了get ，自然想到了 set

所以，要重新设置全局安装的路径则

npm config set prefix absolute_path

 C:\Users\mild>npm config set prefix C:\data\nodejs\node_global C:\Users\mild>npm config get prefix C:\data\nodejs\node_global

如果不用绝对路径，则会在当前目录设置相对目录

回过头来看 npm install

当在Node 代码中使用require引入第三方模块

Node会在node_modules中查找该模块；
该模块自己也有 package.json ，也会依赖第三方模块，那么Node会加载器main字段定义的主文件

那么这样依赖来依赖去，就会形成一个依赖树型结构；其中肯定出现了相同的依赖被多个模块所依赖的情况，而npm会首先统计所有的依赖，然后统一安装到 node_modules 目录之下，（这样就避免同一个依赖可能被下载安装很多次）

npm 缓存

为了避免每次都从Remote Repository 下载模块， npm会有一个本地的缓存

查看缓存地址

npm config get cache

类似的，设置缓存地址

npm config set cache absolute_path

如下

C:\Users\mild>npm config get cacheC:\software\nodejs\npm_installation_path\node_cache
C:\Users\mild>npm config set cache  C:\data\nodejs\node_cache
C:\Users\mild>npm config get cacheC:\data\nodejs\node_cache

既然是缓存，那么就可以清空

npm cache clean -force

模块版本控制与`package-lock.json`

package.json能够通过 模糊版本号匹配规则 来控制引入的第三方模块版本，但是对于第三方模块版本中包含的依赖，却无法控制

在npm5.0.0之后的版本，加入了 package-lock.json

该文件描述 package.json 中所有模块及其子模块的版本信息，且该文件内容自动生成

在实际开发过程中，只需要提交

package.json 和 package-lock.json

到代码仓库，那么想要安装项目环境，只需要

npm install

使用`npm`安装`vue3`和`vue3-cli（`命令行工具 (CLI)）

以全局的方式安装

 # 最新稳定版 vue3 npm install vue@next

C:\Users\mild>npm install vue@nextadded 21 packages in 12snpm noticenpm notice New minor version of npm available! 8.11.0 -> 8.15.1npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1npm notice Run npm install -g [email protected] to update!npm notice

这里是提醒我要升级npm了，所以直接升级

npm install -g npm@8.15.1

# 安装vue-clinpm install -g @vue/cli

C:\Users\mild>npm install -g @vue/clinpm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecatednpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
added 848 packages in 2m

可见出现了5条 弃用警告信息（WARN Deprecated）

网上一搜，说是要配置淘宝镜像，命令这样

npm config set registry https://registry.npm.taobao.org

发现又是以npm config set开头 , 好奇的我在设置前，get了一下

C:\Users\mild>npm config get registryhttp://registry.npm.taobao.org/

得到的是http协议的镜像网站，所以set只不过是改了个协议

然后下载cnpm

npm install -g cnpm

安装完淘宝镜像后，再重新装一下vue-cli

cnpm install -g @vue/cli

安装完成后，可以检测一下vue-cli是否安装成功

C:\data\nodejs\node_global>vue --version @vue/cli 5.0.8

可能会出现找不到vue命令的情况，那就是vue命令没有添加到系统path变量里面，可以直接到有vue命令的文件夹，也就是在npm config get prefix 显示的文件夹中

快速打开系统属性的方法：Ctrl+R，输入 sysdm.cpl

本篇结束

参考

Node.js 中文网 (nodejs.cn) http://nodejs.cn/

Node.js 和浏览器的区别 (nodejs.cn) http://nodejs.cn/learn/differences-between-nodejs-and-the-browser

vue3 官网安装文档 https://v3.cn.vuejs.org/guide/installation.html