Node.js + Vue3安装与配置、启动教程（保姆收藏级）。

一、下载和安装Vue

首先下载node

官网下载地址Download | Node.js

根据自己的电脑系统，选择适合自己的版本。

下载好之后，运行下载的安装包。

①点击next

②勾选同意，点击Next

③建议把目录更换到自己想要安装的目录里面（我这里是提前建好一个目录D:\tools\)

④默认勾选，直接Next

⑤不勾选，直接Next

⑥install安装

⑦等待安装。

⑧点击Finish完成安装。

⑨同时按win+R,输入cmd，打开终端。

在终端分别输入以下两个命令；

node -v

npm -v

显示以下结果即为安装成功

二、创建全局安装目录和缓存日志目录
在我们的安装目录下，创建名为node_cache和node_global的文件夹。

node_cache

node_global

打开终端，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set cache "你的安装目录\node_cache"

npm config set prefix "你的安装目录\node_global"

为了以后下载包快速，执行如下代码，修改源为华为镜像。
华为源:

npm config set registry=https://mirrors.huaweicloud.com/repository/npm/

查看npm配置修改是否成功

npm config list

三、【基于 vite 创建 VUE3】(推荐)

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX、CSS 等支持开箱即用。
• 真正的按需编译，不再等待整个应用编译完成。
• webpack构建 与 vite构建对比图如下：
• 
• 
• 具体操作如下（点击查看官方文档）

终端输入如下命令安装Vue3

npm create vue@latest

如在运行npm命令时出现下面错误，按照以下步骤操作。（如正常安装请跳过）

这个错误是因为 Windows PowerShell 默认限制了脚本的执行，导致你无法运行 npm 命令。你可以通过调整 PowerShell 的执行策略来解决这个问题。按照以下步骤操作：

1、同时按win+R,输入 PowerShell

2、 检查当前的执行策略：在 PowerShell 中输入以下命令：

Get-ExecutionPolicy

如果返回的是 Restricted，就需要修改执行策略。

3、修改执行策略：输入以下命令来允许脚本运行： 

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

这将允许 PowerShell 执行本地脚本，但对于从互联网下载的脚本，需要是已签名的。 

4、确认修改：执行上述命令后，系统会提示你确认，输入 Y 并按回车键。

 再次尝试执行npm命令：

npm create vue@latest

如出现输入项目名称，证明已经能安装Vue3了，按提示选择。我发现一段时间提示信息都会改变。 

四、安装依赖：如不安装依赖，env.d.ts文件会飘红，项目也不能正常打开。

npm i

‌env.d.ts文件是Vite项目中用于定义全局类型声明的TypeScript文件‌。它帮助开发者向TypeScript提供全局的类型提示，特别是在使用一些特定于Vite的功能。

依赖安装以后，发现多出一个node_modules文件夹，那证明依赖已经安装成功。

五、启动项目测试

npm run dev

启动速度很快。按住Ctrl+点击生成的地址就能打开测试页。 

package.json文件提示各命令的作用。dev是启动项目测试。build是打包项目