在 Vue3 项目中实现计时器组件的使用（Vite+Vue3+Node+npm+Element-plus，附测试代码）

一、概述

记录时间 [2024-12-26]

本文讲述如何在 Vue3 项目中使用计时器组件。具体包括开发环境的配置，Vite+Vue 项目的创建，Element Plus 插件的使用，以及计时器组件的创建和使用。

想要直接实现计时器组件，查看文章的第四部分。

文末附有项目的测试代码，可以直接上手哦。

1. 计时器效果图

计时停止状态

计时启动状态

开发工具及文档

• Node.js - 下载地址；Node.js 安装和配置 - 参考文章
• VS Code - 下载地址；写前端代码的软件，直接安装即可。或者通过压缩包解压缩安装。
• Vue3 - 文档
• Vite - 文档
• Element Plus - 文档

二、创建 + 配置项目

Vite 是一种新型前端构建工具，意在提供开箱即用的配置，能够显著提升前端开发体验。

1. 创建

在 cmd 中，通过 Vite，构建一个 Vite + Vue 项目。

自行指定项目存放位置。

# check npm, 检查 npm 版本
npm -v# 7.0 以上版本使用该语句
npm create vite@latest my-vue-app# choose vue + js
# 选择创建 Vue 项目，使用 JavaScript 语言# 执行以下命令即可运行该模板项目
cd my-vue-app	# 跳转到项目路径
npm install		# 安装依赖
npm run dev		# 执行运行

2. 项目预览

通过浏览器，访问对应的 http 路径，就可以查看这个模板项目。

# 通过浏览器访问
Local:   http://localhost:5173/# Ctrl + C 终止项目

3. 修改项目模板

使用 VS Code 打开项目 my-vue-app，观察左边四个文件。

• 删除 HelloWorld.vue，style.css；
• 再把 App.vue，main.js 里面没用的代码注释掉。

就剩下一个基本框架，方便我们后续写内容。

修改 v3 创建模板（可选）

文件路径：C:\Users\user\.vscode\extensions\sdras.vue-vscode-snippets\snippets\vue.json

修改 vbase-3-setup 模板，后续创建 vue 组件时会用到。

  "Vue Single File Component Setup Composition API": {"prefix": "vbase-3-setup","body": ["<script setup>","","</script>","","<template>","","</template>","","<style scoped>","","</style>"],"description": "Base for Vue File Setup Composition API"},

修改后，vbase-3-setup 模板效果如下，输入 v3 即可使用。

重启 VS Code 生效。

<script setup></script><template></template><style scoped></style>

4. 安装前端组件

安装组件

Element Plus 是基于 Vue 3，面向设计师和开发者的组件库。里面有一些基础的前端组件样式，如布局、按钮、输入框等，可用于简化开发。

通过 npm 安装 Element Plus：

可以用 cmd，也可以通过 VS Code 中的终端 Terminal 来执行项目。后续 Terminal 用的比较多。

# Ctrl + C 终止项目# 安装 Element Plus
npm install element-plus --save

会安装在项目的 node_modules 目录下。

导入组件

然后在 main.js 中导入组件。

import { createApp } from 'vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

三、整体布局

1. 测试

经过上面的修改，运行项目后，我们在浏览器中看到的是一个空白的页面。

npm install		# 安装依赖
npm run dev		# 执行运行

在 App.vue 中写点内容测试一下：

<script setup>
</script><template><h3>test</h3>
</template><style scoped></style>

保存修改后的文件，然后刷新浏览器的页面。就可以观察到更新后的内容。

2. 栅格布局

使用 Element Plus，通过基础的 24 分栏，迅速简便地创建布局。

挑选一个左中右 3 分的布局。

在 App.vue 中实现这个效果。

HTML 显示

此时布局中，“左中右” 分布为 8:8:8(24)，也就是均分，我们可以手动调整为 6:12:6(24)，这样中间的空间多一些。

<template><el-row><!-- left --><el-col :span="8"><div class="grid-content ep-bg-purple" /><h1>left</h1></el-col><!-- center --><el-col :span="8"><div class="grid-content ep-bg-purple-light" /><h1>center</h1><h1>计时器组件</h1></el-col><!-- right --><el-col :span="8"><div class="grid-content ep-bg-purple" /><h1>right</h1></el-col></el-row>
</template>

CSS 样式

<style scoped>
h1 {text-align: center;
}.el-row {margin-bottom: 20px;
}.el-row:last-child {margin-bottom: 0;
}.el-col {border-radius: 4px;
}.grid-content {border-radius: 4px;min-height: 36px;
}
</style>

3. 效果预览

在浏览器中呈现的效果如下图所示。

四、计时器组件

1. 创建 + 导入组件

Vue 组件的创建位置一般在项目的 my-vue-app\src\components 目录下。

在该目录下，创建计时器组件 Timer.vue

<script setup></script><template><h3>计时器组件 Timer.vue 导入到 App.vue 中</h3>
</template><style scoped></style>

将计时器组件导入到 App.vue 中

• 在 <script> 标签里导入；
• 在 <template> 中应用。

<script setup>
import Timer from './components/Timer.vue'
</script><template><!-- template 里面有其他代码的，Timer 放到对应位置即可 --><!-- 放到 center 布局里 --><Timer />
</template>

2. 计时器的布局

先在网页上绘制计时器的静态布局，就是先画出一个样子来。

• 内 / 外边框，按钮，使用 Element Plus 组件；
• “时分秒” 显示 2 位数，“毫秒” 显示 3 位数；
• 各种文字调整成合适大小。

效果预览

代码编写

外边框

外边框在 App.vue 中实现，在 <style> 中编写一个 css 样式，使用 Element Plus 组件。

.box {width: 90%;border: 2px solid var(--el-border-color);border-radius: 0;padding: 30px;
}

在 <template> 中使用：

<div class="box"><Timer1 />
</div>

---

其他布局在 Timer.vue 中编写代码。

---

内边框 + 边框内的文字 + 三个按钮

• 使用 Element Plus 边框组件，在一行中循环显示 4 个小边框。
• 边框内的文字分两部分：显示时间；时间单位。
• 使用 Element Plus 按钮组件，设置 “开始”，“暂停”，“重置” 3 个按钮。

<template><h1>计时器</h1><!-- display: inline; 让 div 在同一行 --><!-- 循环显示 4 个小边框 --><div v-for="i in 4" style="display: inline;"><div class="radius" :style="{borderRadius: 'small'? `var(--el-border-radius-small)`: '',}"><div class="show-size">00<span style="font-size: 20px;">小时</span><!-- 通过总耗时获取对应的时分秒 --><!-- {{ formatTime(elapsedTime, time[i - 1]) }} --><!-- 通过数组获取对应的时间单位 --><!-- <span style="font-size: 20px;">{{ timeShow[i - 1] }}</span> --></div></div></div><!-- 框 和 button 使用 element-plus --><div style="margin-top: 120px;"><el-button type="primary">开始</el-button><el-button type="info">暂停</el-button><el-button>重置</el-button></div>
</template><style scoped>
.show-size {font-size: 2em;margin: 10px 0;text-align: center;
}.radius {height: 60px;width: 20%;border: 1px solid var(--el-border-color);border-radius: 0;float: left;
}
</style>

3. 计时器的初步逻辑

接下来在 Timer.vue 中实现计时器的初步逻辑：

• 使用定时器函数累计耗时，确定时间概念（时分秒）。
• 能通过网页与计时器组件进行交互。
• 点击启动，计时器开始工作；点击暂停，计时器暂停工作；点击重置，计时器重置。

定时器函数

setInterval() 是 JavaScript 中的一个定时器函数，用于按照指定的时间间隔（以毫秒为单位）重复执行一段代码或函数。它会持续调用指定的函数，直到 clearInterval() 被调用或者页面被卸载。

setInterval() 会返回一个 intervalID，是正整数形式的标识符，可用于清除定时器。

参考用法（观察一下）

// intervalID: id
let intervalID = null;// 通过 id 启动定时器
// func: 每次定时器到期时要调用的函数或要执行的代码
// delay: 两次调用之间的时间间隔, 以毫秒为单位, 1s = 1000ms
intervalID = setInterval({func}, delay);// 通过 id 清除定时器
clearInterval(intervalId);

定时器：规定一段时间，每隔一段时间完成一个动作，比如执行一段代码；

计时器：统计累计消耗的时间。

定义变量

在 Timer.vue 中实现这个逻辑：

• elapsedTime：累计耗时（以毫秒为单位）；
• intervalId：定时器的 ID；
• setInterval()：启动定时器；
• clearInterval()：清除定时器。
• isRunning：判断计时器是否启动的标志。（计时器和定时器同启同停）

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。

在 <script> 标签中导入 ref，定义变量。

<script setup>
import { ref } from 'vue';// 计时器的启动状态 false 暂停计时；ture 正在计时
const isRunning = ref(false);// 计时器的耗时（以毫秒为单位）
const elapsedTime = ref(0);// 定时器的 id，用于调用定时器的函数，如 setInterval，clearInterval
let intervalId = null;// 循环获取数组的内容, 配合小边框使用, 用来渲染页面内容
const time = ['hours', 'minutes', 'seconds', 'millis'
];const timeShow = ['小时', '分钟', '秒', '毫秒'
];
</script>

启动计时器

编写方法 startTimer()，用于启动计时器。

• 判断计时器的启动状态，如果已经在计时，直接返回；
• 更新计时器的启动状态为 ture；
• 通过 id 启动定时器，累加耗时，从而相当于启动了计时器，每隔 5ms 在 elapsedTime 中更新累计耗时。

// 启动计时器
const startTimer = () => {// 如果已经在计时，直接返回if (isRunning.value) return;// 更新计时器的状态为 ture 正在计时isRunning.value = true;// 通过 id 启动定时器，累加耗时，从而相当于启动了计时器，1s = 1000ms，每 5ms 累加 5msintervalId = setInterval(() => {elapsedTime.value += 5;}, 5);
}

暂停计时器

编写方法 pauseTimer()，用于暂停计时器。

• 更新计时器的启动状态为 false；
• 通过 id 清除定时器，暂停耗时的累加，从而相当于暂停了计时器。

// 暂停计时器
const pauseTimer = () => {// 更新计时器的状态为 false 暂停计时isRunning.value = false;// 通过 id 清除定时器，暂停耗时的累加，从而相当于暂停了计时器clearInterval(intervalId);
}

重置计时器

编写方法 resetTimer()，用于重置计时器。

• 更新计时器的启动状态为 false；
• 通过 id 清除定时器，停止耗时的累加；
• 将总耗时 elapsedTime 的值清空。
• 停止耗时的累加，且清空总耗时，相当于重置了计时器。

// 重置计时器
const resetTimer = () => {// 更新计时器的状态为 falseisRunning.value = false;// 通过 id 清除定时器，暂停耗时的累加clearInterval(intervalId);// 将已耗时设置为 0elapsedTime.value = 0;// 重置起始时间// for (let i = 0; i < 4; i++) {//     startTime.value[i] = 0;// }
}

耗时换算

我们通过 elapsedTime 累加耗时，它是以毫秒为单位的，我们要实现 “时，分，秒，毫秒” 分区显示。

需要通过简单的数学计算，来完成耗时换算。
$$\begin{gathered} 1s=1000ms \\ 1min=60s=(60\times 1000)ms \\ 1h=60min=(60\times 60)s=(60\times 60\times 1000)ms \end{gathered}$$

倒过来计算，通过毫秒换算成 “时，分，秒，毫秒” 显示。

注意：程序中整数做除法，会直接省略小数点后面的数值（3739220/1000 = 3739）
$$\begin{gathered} eg:totalTime=3739220ms \\ show:millis=totalTime\%1000=3739220\%1000=220ms \\ show:seconds=(totalTime/1000)\%60=19s \\ show:minutes=(totalTime/(1000\ast 60))\%60=2min \\ show:hours=(totalTime/(1000\ast 60\ast 60))\%24=1h \\ endShow:1h:2min:19s:220ms \end{gathered}$$

在代码中编写耗时换算函数 formatTime：

// 时分秒分区显示
const formatTime = (milliseconds, timeString) => {const millis = Math.floor(milliseconds % 1000);const seconds = Math.floor((milliseconds / 1000) % 60);const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);// 配合数组 time 使用，确定获取的是 millis/seconds/minutes/hours 其中一部分// String(obj).padStart(3, '0') 格式化数据的显示，毫秒 3 位，其他 2 位if (timeString == 'millis') {return `${String(millis).padStart(3, '0')}`;} else if (timeString == 'seconds') {return `${String(seconds).padStart(2, '0')}`;} else if (timeString == 'minutes') {return `${String(minutes).padStart(2, '0')}`;} else if (timeString == 'hours') {return `${String(hours).padStart(2, '0')}`;}}

4. 更新页面渲染

动态显示

在 Timer.vue 的 <template> 标签中，使用插值表达式 {{}} 来完成页面内容的动态显示。

• 通过总耗时获取对应的 “时分秒”

<!-- i 用于循环遍历 -->
{{ formatTime(elapsedTime, time[i - 1]) }}

• 通过数组获取对应的时间单位

<!-- i 用于循环遍历 -->
{{ timeShow[i - 1] }}

• 绑定按钮点击事件和可点击状态

<!-- @click="startTimer", 点击按钮触发 startTimer() 方法 -->
<!-- :disabled="isRunning", 根据 isRunning 的值确定按钮是否被禁用, true 禁用, false 不禁用 --><el-button @click="startTimer" :disabled="isRunning" type="primary">开始</el-button><!-- 另外两个按钮同理 --><el-button @click="pauseTimer" :disabled="!isRunning" type="info">暂停</el-button>
<el-button @click="resetTimer">重置</el-button>

效果预览

点击启动，计时器开始工作；点击暂停，计时器暂停工作；点击重置，计时器重置。

计时器不动时，“暂停” 按钮不可点击；计时器运行时，“开始” 按钮不可点击。

（按钮被禁用时，颜色会变浅一些）

---

接下来开始优化计时器，增加设置起始时间功能，同时设置运行时特效。

---

5. 设置起始时间

效果预览

在计时器的下方，可以设置计时器的起始时间。

需要达到的效果：按照 “时分秒” 的格式设置起始时间，点击 “提交” 按钮后，上方计时器显示的起始时间，就是我们提交的时间。

逻辑实现

在 Timer.vue 的 <script> 标签中编写逻辑代码。

• startTime：存放 “时分秒” 格式的初始时间的数组，默认为 [0, 0, 0, 0]；
• setStartTime()：将提交的 startTime 换算成 “毫秒”，然后赋值给计时器的耗时 elapsedTime；
• 重置计时器的同时，将 startTime 的值重置为 [0, 0, 0, 0]。

// 起始时间
const startTime = ref([0, 0, 0, 0]);// 设置起始时间，换算成毫秒，赋值给计时器的耗时
const setStartTime = () => {elapsedTime.value = (((startTime.value[1] * 60) + startTime.value[2]) * 60 + startTime.value[3]) * 1000;
}// 重置计时器
const resetTimer = () => {// other codes...// 重置起始时间for (let i = 0; i < 4; i++) {startTime.value[i] = 0;}
}

样式设计

使用 Element Plus 组件，挑选 3 个下拉选项框，分别对应选择的 “时分秒”。

• 在下拉选项框中，使用 v-model 与 startTime 数组内容双向绑定，这样会将选中的起始时间保存到这个数组中。
• 使用 :disabled 绑定 isRunning 的值，来决定下拉选项框是否被禁用。在计时器启动时，禁用；计时器停止时，不禁用。

再使用一个 “提交” 按钮，点击按钮，就执行 setStartTime() 方法。

• “提交” 按钮的点击事件绑定 setStartTime() 方法，将提交的 startTime 换算成 “毫秒”，然后赋值给计时器的耗时 elapsedTime；
• 由于使用了 ref，DOM 会自动更新，也就是计时器上的时间会更新成所提交的起始时间。
• 使用 :disabled 绑定 isRunning 的值，在计时器启动时，禁用 “提交” 按钮，不允许修改时间。

在 Timer.vue 的 <template> 标签中编写。

<!-- set Start Time --><h3>设置起始时间</h3><div v-for="i in 3" style="display: inline;"><el-select v-model="startTime[i]" :disabled="isRunning" placeholder="Select" class="select-box"><el-option v-for="item in 60" :key="item - 1" :label="`${item - 1} ${timeShow[i - 1]}`" :value="item - 1" /></el-select></div><!-- 计时器启动时不允许修改时间 --><el-button type="success" @click="setStartTime" :disabled="isRunning">提交</el-button>

给下拉选项框设置一个 css 样式，在 Timer.vue 的 <style> 标签中编写。

.select-box {width: 100px;margin-right: 10px;
}

6. 设置运行时特效

在计时器启动时，计时器上显示的时间会发生变化。在此时，我们给计时器设计一个特别的 css 样式。

• 在计时器暂停 / 停止时，计时器上显示的时间不动，颜色是默认的；
• 在计时器启动时，计时器上显示的时间会发生变化，颜色也发生变化，变成海棠红色。

效果预览

计时器启动时的效果。

代码编写

在 Timer.vue 的 <template> 标签中修改代码。该效果是使用 v-if 来实现的。

<!-- set running css v-if --><div class="show-size"><span v-if="isRunning" style="color:#db5a6b;"><!-- 通过总耗时获取对应的时分秒 -->{{ formatTime(elapsedTime, time[i - 1]) }}<!-- 通过数组获取对应的时间单位 --><span style="font-size: 20px;">{{ timeShow[i - 1] }}</span></span><span v-else>{{ formatTime(elapsedTime, time[i - 1]) }}<span style="font-size: 20px;">{{ timeShow[i - 1] }}</span></span></div>

五、运行项目

至此，在 Vue3 项目中使用计时器组件就成功实现了，点击 VS Code 左上角的 Terminal -> New Terminal，转到 powershell 中，执行以下命令，即可运行此项目。

npm install		# 安装依赖
npm run dev		# 执行运行# 通过浏览器访问
Local:   http://localhost:5173/# Ctrl + C 终止项目

六、完整测试代码

1. create

# check npm
npm -v# npm 7+, 创建 Vite+Vue3 项目
npm create vite@latest my-vue-app# choose vue + js
# 选择创建 Vue 项目，使用 JavaScript 语言# 跳转到项目路径
cd my-vue-app# 安装 element-plus
npm install element-plus --savenpm install		# 安装依赖
npm run dev		# 执行运行# 通过浏览器访问
Local:   http://localhost:5173/# Ctrl + C 终止项目

2. main.js

import { createApp } from 'vue'// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

3. App.vue

<script setup>
import Timer from './components/Timer.vue'
</script><template><el-row><!-- left --><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col><!-- center --><el-col :span="12"><div class="grid-content ep-bg-purple-light" /><div class="box"><Timer /></div></el-col><!-- right --><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col></el-row>
</template><style scoped>
h1 {text-align: center;
}.box {width: 90%;border: 2px solid var(--el-border-color);border-radius: 0;padding: 30px;
}.el-row {margin-bottom: 20px;
}.el-row:last-child {margin-bottom: 0;
}.el-col {border-radius: 4px;
}.grid-content {border-radius: 4px;min-height: 36px;
}
</style>

4. Timer.vue

<script setup>
import { ref } from 'vue';// 计时器的启动状态 false 暂停计时；ture 正在计时
const isRunning = ref(false);// 计时器的耗时（以毫秒为单位）
const elapsedTime = ref(0);// 定时器的 id，用于调用定时器的函数，如 setInterval，clearInterval
let intervalId = null;// 循环获取数组的内容, 配合小边框使用, 用来渲染页面内容
const time = ['hours', 'minutes', 'seconds', 'millis'
];const timeShow = ['小时', '分钟', '秒', '毫秒'
];// 起始时间
const startTime = ref([0, 0, 0, 0]);// 设置起始时间，换算成毫秒，赋值给计时器的耗时
const setStartTime = () => {elapsedTime.value = (((startTime.value[1] * 60) + startTime.value[2]) * 60 + startTime.value[3]) * 1000;
}// 时分秒分区显示
const formatTime = (milliseconds, timeString) => {const millis = Math.floor(milliseconds % 1000);const seconds = Math.floor((milliseconds / 1000) % 60);const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);// 配合数组 time 使用，确定获取的是 millis/seconds/minutes/hours 其中一部分// String(obj).padStart(3, '0') 格式化数据的显示，毫秒 3 位，其他 2 位if (timeString == 'millis') {return `${String(millis).padStart(3, '0')}`;} else if (timeString == 'seconds') {return `${String(seconds).padStart(2, '0')}`;} else if (timeString == 'minutes') {return `${String(minutes).padStart(2, '0')}`;} else if (timeString == 'hours') {return `${String(hours).padStart(2, '0')}`;}}// 启动计时器
const startTimer = () => {// 如果已经在计时，直接返回if (isRunning.value) return;// 更新计时器的状态为 ture 正在计时isRunning.value = true;// 通过 id 启动定时器，累加耗时，从而相当于启动了计时器，1s = 1000ms，每 5ms 累加 5msintervalId = setInterval(() => {elapsedTime.value += 5;}, 5);
}// 暂停计时器
const pauseTimer = () => {// 更新计时器的状态为 false 暂停计时isRunning.value = false;// 通过 id 清除定时器，暂停耗时的累加，从而相当于暂停了计时器clearInterval(intervalId);
}// 重置计时器
const resetTimer = () => {// 更新计时器的状态为 falseisRunning.value = false;// 通过 id 清除定时器，暂停耗时的累加clearInterval(intervalId);// 将已耗时设置为 0elapsedTime.value = 0;// 重置起始时间for (let i = 0; i < 4; i++) {startTime.value[i] = 0;}
}</script><template><h1>计时器</h1><!-- display: inline; 让 div 在同一行 --><!-- 循环取数 --><div v-for="i in 4" style="display: inline;"><div class="radius" :style="{borderRadius: 'small'? `var(--el-border-radius-small)`: '',}"><!-- set running css v-if --><div class="show-size"><span v-if="isRunning" style="color:#db5a6b;"><!-- 通过总耗时获取对应的时分秒 -->{{ formatTime(elapsedTime, time[i - 1]) }}<!-- 通过数组获取对应的时间单位 --><span style="font-size: 20px;">{{ timeShow[i - 1] }}</span></span><span v-else>{{ formatTime(elapsedTime, time[i - 1]) }}<span style="font-size: 20px;">{{ timeShow[i - 1] }}</span></span></div></div></div><!-- 框 和 button 使用 element-plus --><div style="margin-top: 120px;"><!-- @click 绑定按钮点击事件；:disabled 绑定按钮是否可以点击 --><el-button @click="startTimer" :disabled="isRunning" type="primary">开始</el-button><el-button @click="pauseTimer" :disabled="!isRunning" type="info">暂停</el-button><el-button @click="resetTimer">重置</el-button></div><!-- set Start Time --><h3>设置起始时间</h3><div v-for="i in 3" style="display: inline;"><el-select v-model="startTime[i]" :disabled="isRunning" placeholder="Select" class="select-box"><el-option v-for="item in 60" :key="item - 1" :label="`${item - 1} ${timeShow[i - 1]}`" :value="item - 1" /></el-select></div><!-- 计时器启动时不允许修改时间 --><el-button type="success" @click="setStartTime" :disabled="isRunning">提交</el-button>
</template><style scoped>
.show-size {font-size: 2em;margin: 10px 0;text-align: center;
}.radius {height: 60px;width: 20%;border: 1px solid var(--el-border-color);border-radius: 0;float: left;
}.select-box {width: 100px;margin-right: 10px;
}
</style>

参考资料

Vue3 文档：https://cn.vuejs.org/guide/introduction.html

Vite 文档：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project

Element-plus 文档：https://element-plus.org/zh-CN/component/overview.html

色彩工具：https://tool.lu/index.php/color/palette.html?id=2

VS Code 官网：https://code.visualstudio.com/

Node.js 官网：https://nodejs.org/zh-cn/download/prebuilt-binaries

参考文章 - Node.js 安装和配置：https://blog.csdn.net/Sareur_1879/article/details/144729321