冠军资讯
代码一只喵在 Windows 环境下进行前端开发，尤其是涉及到 Node.js 和 Vue.js 框架时，常常会遇到各种各样的配置问题。环境变量设置不当、依赖包安装失败、版本冲突等问题层出不穷，严重影响开发效率。本文旨在提供一套完整的 Windows 环境下安装 Node.js 和 Vue.js 框架的指南，并分享一些实战中的避坑经验，帮助开发者快速搭建稳定高效的开发环境。
Node.js 安装与配置
下载 Node.js 安装包
访问 Node.js 官网 https://nodejs.org/，下载 LTS (Long Term Support) 版本的 Windows 安装包。LTS 版本经过充分测试，稳定性更高，更适合生产环境。
安装 Node.js
- 双击下载的
.msi安装包，启动安装向导。 - 阅读许可协议，同意后点击“Next”。
- 选择安装目录，建议使用默认目录。也可以自定义安装目录，但要注意后续环境变量的配置。
- 重要步骤：在“Custom Setup”页面，确保勾选 “Add to PATH” 选项。这个选项会自动将 Node.js 的安装目录添加到 Windows 的环境变量中，方便在命令行中使用
node和npm命令。如果没有勾选，需要手动配置环境变量。 - 点击“Next”，然后点击“Install”开始安装。
- 安装完成后，点击“Finish”。
验证 Node.js 安装
打开命令提示符 (CMD) 或 PowerShell，输入以下命令：
node -v
npm -v
如果正确安装，会显示 Node.js 和 npm 的版本号。例如：
v18.16.0
9.5.1
配置 npm 镜像
由于国内网络环境的特殊性，使用 npm 安装依赖包时速度可能会很慢，甚至出现连接超时的错误。为了解决这个问题，可以配置 npm 使用国内的镜像源，例如淘宝 npm 镜像：
npm config set registry https://registry.npmmirror.com/
npm config get registry # 验证是否配置成功
更换 npm 全局安装目录 (可选)
默认情况下，npm 全局安装的模块会放在 C:\Users\{Your User}\AppData\Roaming\npm 目录下。为了避免权限问题，或者方便统一管理，可以修改 npm 的全局安装目录：
- 创建新的全局安装目录，例如
D:\nodejs\node_global和D:\nodejs\node_cache。 - 配置 npm：
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
- 重要步骤：将
D:\nodejs\node_global添加到 Windows 的环境变量Path中。这样才能在命令行中直接使用全局安装的模块。
Vue.js 安装与配置
安装 Vue CLI
Vue CLI (Command Line Interface) 是 Vue.js 官方提供的脚手架工具，可以快速创建和管理 Vue.js 项目。使用 npm 全局安装 Vue CLI：
npm install -g @vue/cli
验证 Vue CLI 安装
vue --version
如果正确安装，会显示 Vue CLI 的版本号。例如：
@vue/cli 5.0.8
创建 Vue.js 项目
使用 Vue CLI 创建一个新的 Vue.js 项目：
vue create my-project
在项目创建过程中，Vue CLI 会提供多种配置选项，例如选择 Vue 的版本、是否使用 TypeScript、是否使用 ESLint 等。根据自己的需求进行选择。推荐选择 Vue 3，因为它提供了更好的性能和更强大的功能。
运行 Vue.js 项目
进入项目目录，并启动开发服务器：
cd my-project
npm run serve
启动成功后，会在控制台显示项目的访问地址，例如 http://localhost:8080。在浏览器中访问该地址，即可看到 Vue.js 的默认页面。
实战避坑经验总结
- 环境变量配置：Windows 环境下，环境变量的配置非常重要。确保 Node.js 的安装目录和 npm 的全局安装目录都添加到
Path环境变量中。 - npm 镜像：使用国内镜像源可以显著提高依赖包的下载速度。
- 版本管理：使用 nvm (Node Version Manager) 可以方便地管理多个 Node.js 版本。如果项目依赖特定的 Node.js 版本，nvm 可以帮助你快速切换。
- 权限问题：在 Windows 环境下，可能会遇到权限问题。尽量使用管理员权限运行命令行工具。
- 防火墙：如果开发服务器无法访问，检查 Windows 防火墙是否阻止了 Node.js 进程。
- Nginx 反向代理: 如果需要将 Vue 项目部署到生产环境，通常会使用 Nginx 作为反向代理服务器。 可以使用宝塔面板简化 Nginx 的配置。配置反向代理时，需要注意设置合理的并发连接数，防止服务器过载。 Nginx 的负载均衡功能可以提高系统的可用性和性能。
结语
本文详细介绍了 Windows 环境下安装 Node.js 和 Vue.js 框架的步骤，并分享了一些实战中的避坑经验。希望本文能够帮助开发者快速搭建稳定高效的开发环境，提高开发效率。
