需先安装Node.js并配置PATH，再切换npm镜像源，然后执行npm create vite@latest创建Vue 3项目，安装依赖后运行npm run dev启动开发服务器并验证HMR功能。
在Windows系统上配置Vite构建工具以快速开发Vue项目，需确保Node.js环境就绪、避免全局依赖冲突、跳过冗余打包环节，并让npm create vite@latest命令能直接生成可运行的Vue 3项目——这一步卡住，后续所有开发都无从谈起。
安装并验证Node.js运行时
打开浏览器访问 https://www.php.cn/link/837d74cd0d4fbc51ead6d12738e01cba，下载LTS版本（当前为v18.20.4或更高），双击.msi安装包，全程点“Next”，【务必勾选 “Add to PATH”】，否则后续所有npm命令都会提示“不是内部或外部命令”。
安装完成后，按 Win+R → 输入 cmd → 回车，执行：
node -v && npm -v
若同时输出类似 v18.20.4 和 9.9.3 的版本号，说明安装成功；若报错，请关闭命令行重开，或重启电脑使PATH生效。
切换npm镜像源加速依赖安装
国内直连npm官方源极慢，常导致npm install卡死在fetchMetadata或超时退出。
方法一：全局设置淘宝镜像（推荐）
在管理员权限的PowerShell中执行：
npm config set registry https://registry.npmmirror.com/
方法二：仅对当前项目生效（适合多源混用场景）
进入目标目录后，执行：
npm config set registry https://registry.npmmirror.com/ --location=project
验证是否生效：运行 npm config get registry，输出应为 https://registry.npmmirror.com/。
创建Vite+Vue 3项目
第一步：在空白文件夹内右键 → “在此处打开终端”（或Win+R → cmd → cd /d D:\my-projects）
Windows 桌面自动化技能，支持鼠标控制（移动/点击/拖拽/滚轮/截图）、键盘输入（文字输入/按键/组合键）、窗口管理（查找/聚焦/最大化/最小化/关闭/移动）、截图并发送文件。提供两种截图方式：Python pyautogui 截图（集成在自动化流程中）和 PowerShell + .NET 零依赖截图（支持区域截图和多显示器）。当用户需要自动化 Windows 桌面操作、控制鼠标键盘、管理窗口、执行 GUI 自动化任务、截图发送文件时使用。
第二步：执行初始化命令（Vue 3默认使用JavaScript，如需TypeScript请上下键选择）
npm create vite@latest my-vue-app --template vue
第三步：进入项目目录
cd my-vue-app
第四步：安装依赖——这步不可跳过，否则npm run dev会报command not found
npm install
注意：若遇到EPERM: operation not permitted错误，说明杀毒软件或Windows Defender正在锁定node_modules，临时关闭实时保护再重试。
启动开发服务器
在项目根目录下执行：
npm run dev
Vite将自动分配端口（默认5173），控制台输出类似：
➜ Local: http://localhost:5173/
复制该地址到Edge或Chrome浏览器中打开，看到Vue 3欢迎页即表示环境已通。
此时任意修改src/App.vue中的文字，保存后浏览器内容秒级更新，无需手动刷新——这就是Vite的HMR能力，它不依赖webpack式全量重编译，只替换变更模块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
