Vue-2.Nodejs的介绍和安装

---

🌌 Vue专栏 - 搭建一个优秀的Vue架子

---

📚 基础与工具

1. 📘 Vue-1.零基础学习Vue: 开始Vue的学习之旅，适合零基础用户。
2. 📗 Vue-2.Nodejs的介绍和安装: 介绍并指导如何安装Node.js，Vue开发的必备环境。
3. 📙 Vue-3.Vue简介: 提供对Vue框架的基本介绍。

🖥️ 编译器选择与配置

1. 📒 Vue-4.编译器VsCode: 探讨如何在VsCode中进行Vue开发。
2. 📕 Vue-5.编译器Idea: 指导在Idea中配置Vue开发环境。
3. 📔 Vue-6.编译器webstorm: 讨论在WebStorm中搭建Vue开发环境。

🚀 项目构建与配置

1. 🛠️ Vue-7.命令创建Vue项目: 通过命令行快速创建Vue项目。
2. ⚙️ Vue-8.Vue项目配置详解: 深入探讨Vue项目的配置细节。

🧩 集成与优化

1. 🖼️ Vue-9.集成（.editorconfig、.eslintrc.js、.prettierrc）: 集成代码风格和质量控制工具。
2. 🌐 Vue-10.集成.env: 教导如何集成环境变量文件.env。
3. 🔧 Vue-11.集成.travis.yml: 展示如何集成Travis CI配置。
4. 💻 Vue-12.集成postcss.config.js: 指南于PostCSS配置。

🏗️ 实际项目实践

1. 🌍 Vue-13.创建完整的Vue项目（webstorm）: 通过WebStorm创建完整的Vue项目。

---

📢 Node.js 简介

---

1️⃣ 创建 Node.js 应用: package.json

---

📁 步骤

1. 🗂️ 创建一个新文件夹，用于存放所有必要文件。
2. 📝 在文件夹中创建一个 package.json 文件，描述应用程序及其依赖。

🛠️ 操作说明

• 使用 npm install 与 package.json 配合。如果你使用的是 npm 版本 5 或更高，将自动生成 package-lock.json 文件，一同复制到 Docker 镜像中。

📄 示例 package.json

{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "First Last <first.last@example.com>",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

---

2️⃣ Node.js项目入口: server.js（可以自定义命名）

---

🔗 运行与访问

• 使用 node server.js 运行程序。
• 访问 http://localhost:3000 查看输出的 “Hello World”。

📜 示例 server.js

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

---

3️⃣ Node.js的安全问题

---

🔐 安全建议

1. 🚫 避免使用 Buffer() 和 new Buffer(): 对于安全敏感应用，不建议使用。推荐使用 Buffer.alloc(), Buffer.allocUnsafe(), 或 Buffer.from()。

2. ✅ ESLint 规则（推荐）: ESLint 规则可以检测到使用 Buffer() 已废弃的函数。这些规则已经被预先定义。

---

🔍 使用内存堆剖析器

---

1️⃣ 时间轴的分配

---

🛠️ 步骤

1. 在 Chrome 中打开开发者工具。
2. 选择 memory 选项卡。
3. 选择 Allocation instrumentation timeline。
4. 点击开始进行内存剖析。

🖼️ 参考截图

• 第一阶段剖析界面：
  
• 第二阶段剖析界面：
  

---

2️⃣ 采样内存堆剖析器信息

---

🛠️ 步骤

1. 同样，在 Chrome 中打开开发者工具。
2. 选择 memory 选项卡。
3. 选择 Allocation sampling。
4. 点击开始进行内存剖析。

🖼️ 参考截图

• 第一阶段剖析界面：
  
• 第二阶段剖析界面：
  

---

🔄 阻塞与非阻塞一览

---

► 阻塞

• 在 Node.js 中，其他 JavaScript 代码执行必须等待非 JavaScript 操作完成。
• 事件循环在阻塞发生时无法继续运行 JavaScript。
• libuv 的同步方法在 Node.js 标准库中是常见的阻塞操作。

► 非阻塞

• Node.js 标准库中所有 I/O 方法提供异步版本。
• 这些方法接受回调函数，执行非阻塞操作。
• 某些方法存在同步版本，通常以 Sync 结尾。

---

🔀 同步 vs 异步

• 同步代码示例：导致 moreWork() 必须等待文件读取完成后才执行。

  const fs = require('fs');
  const data = fs.readFileSync('/file.md'); // 阻塞，直到文件读取完成
  console.log(data);
  moreWork(); // 在 console.log 之后执行
  

• 异步代码示例：moreWork() 在 console.log 之前执行，无需等待文件读取。

  const fs = require('fs');
  fs.readFile('/file.md', (err, data) => {
    if (err) throw err;
    console.log(data);
  });
  moreWork(); // 在 console.log 之前执行
  

---

📡 并发和吞吐量

• 在 Node.js 中，JavaScript 执行是单线程的。
• 并发性指事件循环在完成其他工作后执行 JavaScript 回调的能力。
• 例如：对于需要 50 毫秒处理时间的 Web 服务器请求，其中 45 毫秒是可异步执行的数据库 I/O，使用非阻塞异步操作可以显著提高并发性。

---

🚧 混合阻塞和非阻塞代码的危险

• 错误示例：fs.unlinkSync() 可能会在 fs.readFile() 之前执行，删除文件。

  const fs = require('fs');
  fs.readFile('/file.md', (err, data) => {
    if (err) throw err;
    console.log(data);
  });
  fs.unlinkSync('/file.md');
  

• 正确示例：使用非阻塞方法保证操作顺序。

  const fs = require('fs');
  fs.readFile('/file.md', (readFileErr, data) => {
    if (readFileErr) throw readFileErr;
    console.log(data);
    fs.unlink('/file.md', (unlinkErr) => {
      if (unlinkErr) throw unlinkErr;
    });
  });
  

⚠️ 注意:

• 在开发过程中，应尽量使用非阻塞方法，以充分利用 Node.js 的事件驱动和非阻塞特性，提高应用性能和响应能力。

---

🔄 Node.js 核心之事件循环

---

🌀 事件循环简介

• 功能：使 Node.js 能够执行 非阻塞 I/O 操作，即使 JavaScript 本身是单线程的。
• 工作方式：事件循环利用系统内核多线程来进行任务处理，实现高效的异步操作。

🕒 定时器阶段 (Timers Phase):

• 任务：执行通过 setTimeout() 和 setInterval() 安排的回调函数。
• 时间控制：定时器设定的时间只是一个最早执行时间的阈值，实际执行时刻可能因系统调度或其他任务延迟。
• 比较：
  • setImmediate()：在当前的事件循环迭代完成后立即执行，适用于希望尽快执行的代码。
  • setTimeout()：根据指定的延迟时间后执行，适用于需要延迟操作的场景。

⌛ 挂起回调阶段 (Pending Callbacks Phase):

• 目的：处理一些 I/O 回调，例如 TCP 错误。
• 特点：这些回调是在前一次事件循环迭代中未能完成的，因此被推迟到当前迭代。

⏳ 空闲、准备阶段 (Idle, Prepare Phase):

• 职责：内部使用，主要为接下来的事件循环迭代做准备工作。

🔄 轮询阶段 (Poll Phase):

• 核心工作：检索新的 I/O 事件，并执行相应的回调。
• 流程：
  • 如果轮询队列不为空：
    • 连续执行队列中的回调，直到队列为空或达到系统限制。
  • 如果轮询队列为空：
    • 如果有通过 setImmediate() 安排的回调，事件循环将进入下一阶段（检查阶段）。
    • 如果没有，事件循环等待新的 I/O 事件加入队列。

📌 检查阶段 (Check Phase):

• 操作：特别执行通过 setImmediate() 安排的回调函数。
• 触发条件：仅在轮询阶段队列为空时，事件循环才会进入此阶段。

❌ 关闭回调阶段 (Close Callbacks Phase):

• 任务：执行某些关闭操作的回调，如 socket.on('close', ...)。
• 用途：用于清理和关闭动作，如关闭网络套接字或文件句柄。

---

🌐 下载与安装 Node.js

---

📥 下载 Node.js

---

• 📌 点击此处下载 Node.js 长期维护版
• 🖼️ 下载界面示例图：
  

---

💿 安装 Node.js

---

• 🚀 安装流程：
  • 双击下载的安装包。
  • 持续点击 next 完成安装。
  • 记住安装路径：C:\Program Files\nodejs。
• 🖼️ 安装界面示例图：
  

---

⚙️ 配置环境变量

---

📁 新建文件夹

• 创建以下文件夹用于存放全局模块和缓存：
  • D:\nodejs\node_global
  • D:\nodejs\node_cache

🔧 更改文件夹权限

• 🖼️ 修改权限界面示例图：
  

🌐 添加环境变量

• 📝 操作步骤：
  • 进入系统环境变量设置。
  • 添加新的环境变量指向之前创建的文件夹。
• 🖼️ 环境变量设置示例图：
  

---

⚡️ 验证 Node.js 安装

---

• 🛠️ 命令验证:
  • 使用 node -v 查看 Node.js 版本。
  • 使用 npm -v 查看 NPM 版本。
• 📝 输出示例:

C:\Users\Administrator>node -v
v18.17.1
C:\Users\Administrator>npm -v
9.6.7

---

🔧 修改模块下载位置

---

• 📂 查看默认模块存储位置:
  • 使用 npm get prefix 和 npm get cache 查看。
• 🔄 更改存储位置:
  • 使用 npm config set prefix "D:\nodejs\node_global" 更改全局模块位置。
  • 使用 npm config set cache "D:\nodejs\node_cache" 更改缓存位置。

C:\Users\Administrator>npm get prefix
C:\Users\Administrator\AppData\Roaming\npm
C:\Users\Administrator>npm get cache
C:\Users\Administrator\AppData\Local\npm-cache
C:\Users\Administrator>npm config set prefix "D:\nodejs\node_global"
C:\Users\Administrator>npm config set cache "D:\nodejs\node_cache"

---

🧪 测试默认位置更改是否成功

---

• 📦 安装测试:
  • 使用 npm install express -g 安装 express 模块。
• 📊 查看变更效果:
  • 安装完成后检查新的模块存储位置。

C:\Users\Administrator>npm install express -g
added 58 packages in 20s
8 packages are looking for funding
  run `npm fund` for details

---

⚙️ 设置淘宝镜像并安装 cnpm

---

• 🌍 设置淘宝 NPM 镜像:
  • 使用 npm config set registry https://registry.npmmirror.com 设置镜像。
• 🛠️ 安装 cnpm:
  • 使用 npm install -g cnpm --registry=https://registry.npmmirror.com 安装 cnpm。

C:\Users\Administrator>npm config get registry
https://registry.npmjs.org/

C:\Users\Administrator>npm config set registry https://registry.npmmirror.com

C:\Users\Administrator>npm config get registry
https://registry.npmmirror.com

C:\Users\Administrator>npm install -g cnpm --registry=https://registry.npmmirror.com

added 399 packages in 18s

28 packages are looking for funding
  run `npm fund` for details

npm config get registry
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com
npm config get registry
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npmmirror.com

---

🔍 查看 cnpm 模块

---

• 📌 验证 cnpm 安装:

  • 使用 cnpm -v 验证 cnpm 是否安装成功。
    

    C:\Users\Administrator>cnpm -v
    cnpm@9.2.0 (D:\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
    npm@9.8.1 (D:\nodejs\node_global\node_modules\cnpm\node_modules\npm\index.js)
    node@18.17.1 (C:\Program Files\nodejs\node.exe)
    npminstall@7.9.0 (D:\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
    prefix=D:\nodejs\node_global
    win32 x64 10.0.19044
    registry=https://registry.npmmirror.com
    

---

📜 附上所有命令

Microsoft Windows [版本 10.0.19044.3086]
(c) Microsoft Corporation。保留所有权利。

C:\Users\Administrator>node -v
v18.17.1

C:\Users\Administrator>npm -v
9.6.7

C:\Users\Administrator>npm get prefix
C:\Users\Administrator\AppData\Roaming\npm

C:\Users\Administrator>npm get cache
C:\Users\Administrator\AppData\Local\npm-cache

C:\Users\Administrator>npm config set prefix "D:\nodejs\node_global"

C:\Users\Administrator>npm config set cache "D:\nodejs\node_cache"

C:\Users\Administrator>npm install express -g

added 58 packages in 20s

8 packages are looking for funding
  run `npm fund` for details

C:\Users\Administrator>npm config get registry
https://registry.npmjs.org/

C:\Users\Administrator>npm config set registry https://registry.npmmirror.com

C:\Users\Administrator>npm config get registry
https://registry.npmmirror.com

C:\Users\Administrator>npm install -g cnpm --registry=https://registry.npmmirror.com

added 399 packages in 18s

28 packages are looking for funding
  run `npm fund` for details

C:\Users\Administrator>cnpm -v
cnpm@9.2.0 (D:\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@9.8.1 (D:\nodejs\node_global\node_modules\cnpm\node_modules\npm\index.js)
node@18.17.1 (C:\Program Files\nodejs\node.exe)
npminstall@7.9.0 (D:\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\nodejs\node_global
win32 x64 10.0.19044
registry=https://registry.npmmirror.com

C:\Users\Administrator>

---

🏮 汉化 Node.js 使用指南

---

📦 安装汉化库 i18n

• 🚀 命令：

  npm install i18n
  

• 📌 作用：
  • 安装 i18n 库用于实现项目的多语言支持。

---

📝 创建汉化配置文件

• 🖋️ 文件名：i18n-config.js
• 🔧 配置内容：

  const i18n = require("i18n");
  
  i18n.configure({
    locales: ["zh-CN"],  // 添加其他语言代码
    defaultLocale: "zh-CN",
    directory: __dirname + "/locales",  // 汉化文件目录
    objectNotation: true,
    updateFiles: false,  // 是否自动更新汉化文件
  });
  
  module.exports = i18n;
  

---

📂 创建汉化文件

• 目录：在项目根目录下创建 locales 文件夹。
• 文件：在 locales 中创建 zh-CN.json 文件（或其他语言文件）。
• 内容示例：

  {
    "Hello": "你好",
    "Welcome": "欢迎"
    // 更多汉化文本
  }
  

---

🖥️ 使用汉化功能

• 🧩 示例代码：

  const i18n = require("./i18n-config.js");
  
  i18n.init();
  
  console.log(i18n.__("Hello"));  // 输出：你好
  console.log(i18n.__("Welcome"));  // 输出：欢迎
  

• 📚 说明：
  • 使用 i18n.__() 函数获取汉化文本。

---

🚀 安装 NVM 以切换 Node.js 环境

• 版本不对怎么办，重装node.js，当然不
• 安装之前请卸载之前的node.js，可能存在冲突

---

1️⃣ 安装 NVM for Windows

• 🔗 访问 NVM for Windows GitHub 页面。
• 📥 下载并运行安装程序。
  

---

2️⃣ 使用 NVM 安装 Node.js

• 🎯 打开命令提示符。
• 📝 输入 nvm install <version> 安装特定版本的 Node.js。
  • 例如：nvm install 12 安装 Node.js 版本 12。nvm install 18 安装 Node.js 版本 18。
    

---

3️⃣ 切换 Node.js 版本

• 🔄 输入 nvm use <version> 切换到特定版本。
  • 例如：nvm use 12 切换到版本 12。nvm use 18 切换到版本 18。使用 nvm list 查看已安装的 Node.js 版本
    

---

4️⃣ 通用说明

• 📊 列出版本：使用 nvm list 查看已安装的 Node.js 版本。
• 🔧 设置默认版本：使用 nvm alias default <version> 设置默认版本。

---

5️⃣ 设置全局模块和缓存目录

• 🚧 为不同 Node.js 版本设置独立的 npm 配置

  • 在 D:\nodejs 下创建 node_global_12 和 node_cache_12 目录。
  • 在 D:\nodejs 下创建 node_global_18 和 node_cache_18 目录。
  • 在 D:\nodejs 下创建 npmrc-12 和 npmrc-18 两个无后缀的文件。

  # 使用 NVM 切换到 Node.js 版本 18
  nvm use 18
  # 为 Node.js 版本 18 设置特定的 npm 配置文件
  set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-18
  # 设置 Node.js 版本 18 的全局模块和缓存目录
  npm config set prefix "D:\nodejs\node_global_18" & npm config set cache "D:\nodejs\node_cache_18"
  # 获取并显示当前配置的全局模块和缓存目录
  npm get prefix & npm get cache
  
  # 使用 NVM 切换到 Node.js 版本 12
  nvm use 12
  # 为 Node.js 版本 12 设置特定的 npm 配置文件
  set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-12
  # 设置 Node.js 版本 12 的全局模块和缓存目录
  npm config set prefix "D:\nodejs\node_global_12" & npm config set cache "D:\nodejs\node_cache_12"
  # 获取并显示当前配置的全局模块和缓存目录
  npm get prefix & npm get cache
  

• 📝 创建独立的 npm 配置文件：

  • npm config set 命令实际上会修改全局的 npm 配置，而不是特定于某个 Node.js 版本的配置
  • 为每个 Node.js 版本（例如，版本 18 和 12）创建单独的 npm 配置文件（如 npmrc-18 和 npmrc-12）。

• 🌐 使用环境变量指定 npm 配置：

  • 设置 NPM_CONFIG_USERCONFIG 环境变量，为不同版本指定不同的 npm 配置文件。
  • 当切换到特定版本时（如 nvm use 18），设置环境变量指向相应的配置文件（如 set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-18）。

• 😏 这也意味着，我们切换版本的时候，也要切换NPM_CONFIG_USERCONFIG变量：

  nvm use 12 & set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-12
  

  nvm use 18 & set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-18
  

---

6️⃣ 更新环境变量

• 将 D:\nodejs\node_global_12， D:\nodejs\node_global_18添加到系统的 PATH 环境变量。
• 将 D:\nodejs\node_cache_12， D:\nodejs\node_cache_18 添加到系统的 PATH 环境变量。
• 注意文件夹授权，前面的nodejs安装有讲到的。
  

---

7️⃣ 安装 cnpm 和 yarn

• 全局安装 cnpm 和 yarn：使用nvm切换版本，两个都要安装

  npm install -g cnpm --registry=https://registry.npm.taobao.org 
  npm install -g yarn                                         
  

---

8️⃣ 配置阿里镜像

• 为 npm 设置镜像：使用nvm切换版本，两个都要安装

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

• 为 yarn 设置镜像：使用nvm切换版本，两个都要安装

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

---

9️⃣ 验证和测试配置

---

📌 重新启动命令提示符

• 确保重新打开命令提示符窗口，以应用任何 PATH 环境变量的变更。

---

📌 验证 npm 和 yarn 配置

• 使用以下命令检查 npm 的配置：

  npm config list
  

• 使用以下命令检查 yarn 的配置：

  yarn config list
  

---

📌 切换 Node.js 版本并设置环境变量

• 切换到 Node.js 版本 12 并设置相应的 npm 配置文件：

  nvm use 12 & set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-12
  

• 切换到 Node.js 版本 18 并设置相应的 npm 配置文件：

  nvm use 18 & set NPM_CONFIG_USERCONFIG=D:\nodejs\npmrc-18
  

---

📌 管理 Node.js 版本

• 使用 nvm list 查看已安装的 Node.js 版本。
• 使用 nvm alias default <version> 设置默认 Node.js 版本。

---

🔒 解决 PowerShell 脚本运行限制问题

• 🖥️ 打开 PowerShell 以管理员身份
  • 在 Windows 开始菜单中搜索 PowerShell。
  • 右击并选择 “以管理员身份运行”。

---

• 🛠️ 查看当前执行策略
  • 运行以下命令查看当前策略：

    Get-ExecutionPolicy
    

  • 如果返回值是 “Restricted”，则需要更改。

---

• 🔄 更改执行策略
  • 将执行策略更改为 “RemoteSigned”，以允许本地脚本运行：

    Set-ExecutionPolicy RemoteSigned
    

  • 当系统提示确认时，输入 “Y” 并回车确认更改。

---

• 🧶 重新运行 yarn 命令
  • 在项目目录中再次运行以下命令：

    yarn init -y
    

⚠️ 注意:

• 改变 PowerShell 的执行策略可能带来安全风险。请确保您理解这一更改的含义，并且只从可信来源运行脚本。
• 如果不想更改全局执行策略，可以使用命令 powershell -ExecutionPolicy Bypass -File yourscript.ps1 临时绕过执行策略限制。

---

🧐 npm、cnpm 和 yarn

---

特征/工具	npm	cnpm	yarn
性质	Node.js 的官方包管理工具	npm 的中国镜像版本	由 Facebook 和其他公司开发的包管理工具
主要优势	官方支持，广泛使用	针对中国地区优化，下载速度更快	性能优秀，特别是在网络性能和可靠性方面
锁文件	package-lock.json（npm 5+）	与 npm 相同	yarn.lock
性能	早期版本较慢，最新版本有显著提升	取决于 npm，主要优化了网络速度	初始版本比 npm 快，特别是在依赖安装上
安全性	提供安全审计工具	与 npm 相同	原生支持脱机模式
特殊功能	广泛的命令和插件生态	解决中国区域访问 npm 速度慢的问题	支持脱机模式，原生支持 monorepo
兼容性	-	完全兼容 npm	较新版本的 npm 兼容性有所改进

---