Windows 环境下安装 Node.js 和 Vue.js 框架完全指南

在这里插入图片描述

本指南将引导你完成在 Windows 操作系统上安装 Node.js、配置 npm 以及安装 Vue.js 框架的全过程。无论你是前端开发新手还是想要搭建本地开发环境的开发者，这篇文章都将为你提供详细的步骤指导和实用技巧。

文章目录

- 🎯 1. 整体流程概览
- 📦 2. 环境准备与系统要求
- - 2.1 系统要求
    - 2.2 预备知识
- 🔧 3. 安装 Node.js
- - 3.1 版本选择策略
    - 3.2 下载安装包
    - 3.3 图形化安装步骤
    - 验证安装
- ⚡ 4. npm 包管理器配置与优化
- - 4.1 npm 基础概念
    - 4.2 配置国内镜像加速
    - 4.3 npm 常用命令速查表
- 🎨 5. Vue.js 框架安装与项目创建
- - 5.1 Vue.js 简介
    - 5.2 安装 Vue CLI
    - 5.3 Vue CLI 功能介绍
    - 5.4 创建第一个 Vue 项目
    - - 步骤1：选择项目目录
        * 步骤2：创建新项目
        * 步骤3：选择配置预设
        * 步骤4：等待项目创建
    - 5.5 启动开发服务器
    - - 进入项目目录
        * 启动开发服务器
        * 访问应用
    - 5.6 项目开发基础
    - - package.json 脚本命令
        * 开发服务器特性
        * 修改默认端口
- 🔧 6. 常见问题与故障排除
- - 6.1 Node.js 相关问题
    - - 问题1：npm 安装速度慢
        * 问题2：权限错误
        * 问题3：项目创建失败
        * 问题4：热重载不工作
    - 6.3 环境变量问题
    - - 检查环境变量设置
- 🚀 7. 进阶内容与最佳实践
- - 7.1 项目结构优化
    - - 推荐的项目结构
    - 7.2 开发工具推荐
    - - VS Code 插件
        * 浏览器插件
    - 7.3 性能优化建议
    - - 代码分割
        * 组件懒加载
    - 7.4 部署准备
    - - 构建生产版本
        * 本地预览构建结果
- 📝 8. 总结
- - 8.1 安装要点回顾
    - 8.2 下一步学习建议
    - 8.3 相关资源链接
- 开发者彩蛋
- 总结

🎯 1. 整体流程概览

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   下载 Node.js  │───▶│   安装配置      │───▶│   验证安装      │
│   LTS 版本      │    │   添加到 PATH   │    │   node -v       │
└─────────────────┘    └─────────────────┘    └─────────────────┘
          │                       │                       │
          ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   配置 npm      │───▶│   安装 Vue CLI  │───▶│   创建项目      │
│   镜像加速      │    │   全局安装      │    │   vue create    │
└─────────────────┘    └─────────────────┘    └─────────────────┘

📦 2. 环境准备与系统要求

在开始安装之前，让我们先了解一下系统要求和准备工作：

2.1 系统要求

操作系统: Windows 10/11 (64位推荐)
内存: 至少 4GB RAM
磁盘空间: 至少 1GB 可用空间
网络: 稳定的互联网连接

2.2 预备知识

本教程适合以下读者：

前端开发初学者
想要搭建本地开发环境的开发者
需要在Windows上配置Node.js环境的用户

🔧 3. 安装 Node.js

Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境，是现代前端开发的基础。它允许你在服务器端运行 JavaScript 代码，同时也是前端工具链的核心组件。

3.1 版本选择策略

渠道	特点	适用场景	下载地址
LTS (推荐)	稳定、长期支持、生产环境首选	生产环境、企业项目	Node.js LTS
Current	包含最新特性，可能不稳定	学习新特性、实验项目	Node.js Current
nvm-windows	多版本管理工具	需要切换版本的开发者	nvm-windows

💡 如何选择合适的版本

推荐选择 LTS 版本的原因：

经过充分测试，稳定性更高
有长期技术支持（通常18个月）
大多数第三方包都会优先支持LTS版本
适合生产环境和学习使用

Current版本适合：

想要体验最新JavaScript特性
参与开源项目开发
对新技术有强烈好奇心的开发者

3.2 下载安装包

访问 Node.js官网下载对应的安装包：

1# 推荐下载链接
2https://nodejs.org/zh-cn/download
3

在这里插入图片描述

3.3 图形化安装步骤

访问 Node.js 官网下载适用于 Windows 系统的 .msi 安装包
双击安装包，启动安装向导
遵循向导提示，点击 “Next”
重要：在 “Custom Setup” 界面，确保 “Add to PATH” 选项已勾选
继续点击 “Next” 并完成安装 💡 为什么要添加到 PATH 添加到 PATH 环境变量后，你可以在任何终端窗口中直接运行 `node` 和 `npm` 命令，而无需输入完整的安装路径。这是最关键的配置步骤。

验证安装

打开终端（PowerShell 或 CMD），输入以下命令验证安装：

1node -v
2npm -v
3

如果返回版本号（如 v20.11.0 和 10.2.4），说明安装成功。

⚠️ 常见问题：PowerShell 脚本执行策略如果看到 "无法加载文件 ... npm.ps1，因为在此系统上禁止运行脚本" 的提示，请以管理员身份打开 PowerShell，执行：

1Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
2

⚡ 4. npm 包管理器配置与优化

npm (Node Package Manager) 是 Node.js 的官方包管理器，用于安装、管理和分享 JavaScript 代码包。

4.1 npm 基础概念

npm 主要功能包括：

包安装: 从npm仓库下载并安装JavaScript包
依赖管理: 自动处理包之间的依赖关系
脚本运行: 执行package.json中定义的脚本
版本控制: 管理包的不同版本

4.2 配置国内镜像加速

由于网络原因，建议切换到国内镜像源提升下载速度：

1# 设置淘宝镜像源
2npm config set registry https://registry.npmmirror.com
3
4# 验证镜像源设置
5npm config get registry
6
7# 查看所有配置
8npm config list
9

🌐 其他镜像源选择

1# 官方源（默认，国外）
2npm config set registry https://registry.npmjs.org/
3
4# 淘宝镜像（推荐）
5npm config set registry https://registry.npmmirror.com/
6
7# 腾讯云镜像
8npm config set registry https://mirrors.cloud.tencent.com/npm/
9
10# 华为云镜像
11npm config set registry https://mirrors.huaweicloud.com/repository/npm/
12

4.3 npm 常用命令速查表

场景	命令示例
查看版本	node -v / npm -v
初始化新项目	npm init -y
安装项目依赖	npm install lodash
安装开发依赖	npm install -D eslint
全局安装工具	npm install -g @vue/cli
卸载依赖包	npm uninstall lodash
更新依赖包	npm update lodash
查看全局路径	npm root -g
清空缓存	npm cache clean --force

📚 命令详解

-y 参数：自动回答所有问题为 “yes”
-D 参数：安装为开发依赖（devDependencies）
-g 参数：全局安装，可在任何位置使用
--force 参数：强制执行操作

🎨 5. Vue.js 框架安装与项目创建

Vue.js 是一款渐进式 JavaScript 框架，以其易学易用、灵活高效的特点深受开发者喜爱。我们将使用 Vue CLI 来快速创建和管理项目。

5.1 Vue.js 简介

Vue.js 的核心特性：

渐进式框架: 可以逐步采用，不需要重写整个应用
响应式数据绑定: 数据变化自动更新视图
组件化开发: 提高代码复用性和维护性
虚拟DOM: 提升渲染性能
丰富的生态系统: Vue Router、Vuex、Nuxt.js等

5.2 安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的标准工具，用于快速搭建 Vue 项目。

1# 全局安装 Vue CLI
2npm install -g @vue/cli
3
4# 如果安装速度慢，可以使用cnpm
5npm install -g cnpm --registry=https://registry.npmmirror.com
6cnpm install -g @vue/cli
7

验证安装是否成功：

1# 查看Vue CLI版本
2vue --version
3
4# 查看Vue CLI帮助信息
5vue --help
6

5.3 Vue CLI 功能介绍

Vue CLI 提供的主要功能：

1# 创建新项目
2vue create <project-name>
3
4# 使用图形界面创建项目
5vue ui
6
7# 添加插件
8vue add <plugin-name>
9
10# 启动开发服务器
11npm run serve
12
13# 构建生产版本
14npm run build
15

5.4 创建第一个 Vue 项目

步骤1：选择项目目录

首先选择一个合适的目录来存放你的项目：

1# 创建项目目录
2mkdir D:\projects\vue-projects
3cd D:\projects\vue-projects
4

步骤2：创建新项目

1# 创建Vue项目
2vue create my-vue-app
3

步骤3：选择配置预设

Vue CLI 会提示你选择预设配置：

Vue CLI v5.0.8
? Please pick a preset:
❯ Default (Vue 3) ([Vue 3] babel, eslint)
  Default (Vue 2) ([Vue 2] babel, eslint) 
  Manually select features

推荐选择：

新手: 选择 Default (Vue 3)
有经验的开发者: 选择 Manually select features 自定义配置 ⚙️ 手动配置选项说明

如果选择手动配置，你可以选择以下功能：

Babel: JavaScript编译器
TypeScript: TypeScript支持
Progressive Web App (PWA) Support: PWA支持
Router: Vue路由
Vuex: 状态管理
CSS Pre-processors: CSS预处理器
Linter / Formatter: 代码检查和格式化
Unit Testing: 单元测试
E2E Testing: 端到端测试

步骤4：等待项目创建

1# 项目创建过程中的输出示例
2Vue CLI v5.0.8
3✨  Creating project in D:\projects\vue-projects\my-vue-app.
4🗃  Initializing git repository...
5⚙️  Installing CLI plugins. This might take a while...
6🚀  Invoking generators...
7📦  Installing additional dependencies...
8✔  Successfully created project my-vue-app.
9

📁 项目结构详解

创建完成后的项目结构：

my-vue-app/
├── public/              # 静态资源目录
│   ├── favicon.ico      # 网站图标
│   └── index.html       # HTML模板
├── src/                 # 源代码目录
│   ├── assets/          # 资源文件
│   ├── components/      # Vue组件
│   │   └── HelloWorld.vue
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .gitignore           # Git忽略文件
├── babel.config.js      # Babel配置
├── package.json         # 项目配置和依赖
├── package-lock.json    # 依赖锁定文件
└── README.md            # 项目说明

关键文件说明：

src/main.js: 应用程序入口点
src/App.vue: 根组件
public/index.html: HTML模板
package.json: 项目配置和脚本

5.5 启动开发服务器

进入项目目录

1# 进入项目目录
2cd my-vue-app
3
4# 查看项目文件
5dir
6

启动开发服务器

1# 启动开发服务器
2npm run serve
3

启动成功的输出示例：

 DONE  Compiled successfully in 2851ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.100:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

访问应用

在浏览器中访问以下地址：

本地访问: http://localhost:5173
局域网访问: http://192.168.1.100:5173 (IP地址会根据你的网络环境变化)

5.6 项目开发基础

package.json 脚本命令

Vue项目提供了以下常用脚本：

1{
2  "scripts": {
3    "serve": "vue-cli-service serve",      // 启动开发服务器
4    "build": "vue-cli-service build",      // 构建生产版本
5    "lint": "vue-cli-service lint"         // 代码检查
6  }
7}
8

1# 开发模式（热重载）
2npm run serve
3
4# 构建生产版本
5npm run build
6
7# 代码检查和修复
8npm run lint
9

开发服务器特性

Vue开发服务器提供了以下特性：

热重载: 代码修改后自动刷新页面
错误提示: 在浏览器中显示编译错误
代理配置: 可以配置API代理
HTTPS支持: 可以启用HTTPS模式

修改默认端口

1# 临时修改端口
2npm run serve -- --port 3000
3
4# 或者在vue.config.js中配置
5

创建 vue.config.js 文件：

1module.exports = {
2  devServer: {
3    port: 3000,
4    open: true,  // 自动打开浏览器
5    host: '0.0.0.0'  // 允许外部访问
6  }
7}
8

🔧 6. 常见问题与故障排除

6.1 Node.js 相关问题

问题1：npm 安装速度慢

解决方案：

1# 设置淘宝镜像
2npm config set registry https://registry.npmmirror.com
3
4# 验证镜像设置
5npm config get registry
6

问题2：权限错误

Windows 常见错误：

Error: EACCES: permission denied

解决方案：

1# 以管理员身份运行PowerShell
2# 或者修改npm全局安装目录
3npm config set prefix "C:\Users\%USERNAME%\AppData\Roaming\npm"
4

问题3：项目创建失败

解决方案：

1# 检查磁盘空间
2# 确保网络连接正常
3# 尝试使用cnpm
4npm install -g cnpm --registry=https://registry.npmmirror.com
5cnpm install -g @vue/cli
6

问题4：热重载不工作

解决方案：
在 vue.config.js 中添加配置：

1module.exports = {
2  devServer: {
3    watchOptions: {
4      poll: 1000,
5      ignored: /node_modules/
6    }
7  }
8}
9

6.3 环境变量问题

检查环境变量设置

1# 检查PATH环境变量
2echo $env:PATH
3
4# 检查Node.js路径
5where node
6where npm
7

🚀 7. 进阶内容与最佳实践

7.1 项目结构优化

7.2 开发工具推荐

VS Code 插件

Vetur: Vue语法高亮和智能提示
Vue 3 Snippets: Vue 3代码片段
ESLint: 代码检查
Prettier: 代码格式化
Auto Rename Tag: 自动重命名标签

浏览器插件

Vue.js devtools: Vue开发者工具

7.3 性能优化建议

代码分割

1// 路由懒加载
2const Home = () => import('@/views/Home.vue')
3const About = () => import('@/views/About.vue')
4

组件懒加载

1// 异步组件
2const AsyncComponent = defineAsyncComponent(() =>
3  import('./components/AsyncComponent.vue')
4)
5

7.4 部署准备

构建生产版本

1# 构建生产版本
2npm run build
3
4# 构建完成后会生成dist目录
5dir dist
6

本地预览构建结果

1# 安装serve工具
2npm install -g serve
3
4# 预览构建结果
5serve -s dist
6

📝 8. 总结

8.1 安装要点回顾

通过本文，我们完成了以下内容：

✅ Node.js 安装: 选择LTS版本，完成图形化安装
✅ 环境配置: 验证安装，配置npm镜像加速
✅ Vue CLI 安装: 全局安装Vue脚手架工具
✅ 项目创建: 创建第一个Vue项目
✅ 开发环境: 启动开发服务器，实现热重载
✅ 故障排除: 掌握常见问题的解决方案

8.2 下一步学习建议

Vue.js 基础: 学习Vue组件、指令、生命周期
Vue Router: 掌握单页应用路由管理
Vuex/Pinia: 学习状态管理
UI框架: 尝试Element Plus、Ant Design Vue等
构建工具: 深入了解Vite、Webpack配置

8.3 相关资源链接

开发者彩蛋

总结

至此，你已经成功在 Windows 上搭建了完整的 Node.js 和 Vue.js 开发环境。

快速回顾：

✓ Node.js LTS 版本安装
✓ npm 镜像源配置
✓ Vue CLI 全局安装
✓ 第一个 Vue 项目创建

《Windows 环境下安装 Node.js 和 Vue.js 框架完全指南》是转载文章，点击查看原文。

Windows 环境下安装 Node.js 和 Vue.js 框架完全指南

文章目录

🎯 1. 整体流程概览

📦 2. 环境准备与系统要求

2.1 系统要求

2.2 预备知识

🔧 3. 安装 Node.js

3.1 版本选择策略

3.2 下载安装包

3.3 图形化安装步骤

验证安装

⚡ 4. npm 包管理器配置与优化

4.1 npm 基础概念

4.2 配置国内镜像加速

4.3 npm 常用命令速查表

🎨 5. Vue.js 框架安装与项目创建

5.1 Vue.js 简介

5.2 安装 Vue CLI

5.3 Vue CLI 功能介绍

5.4 创建第一个 Vue 项目

步骤1：选择项目目录

步骤2：创建新项目

步骤3：选择配置预设

步骤4：等待项目创建

5.5 启动开发服务器

进入项目目录

启动开发服务器

访问应用

5.6 项目开发基础

package.json 脚本命令

开发服务器特性

修改默认端口

🔧 6. 常见问题与故障排除

6.1 Node.js 相关问题

问题1：npm 安装速度慢

问题2：权限错误

问题3：项目创建失败

问题4：热重载不工作

6.3 环境变量问题

检查环境变量设置

🚀 7. 进阶内容与最佳实践

7.1 项目结构优化

推荐的项目结构

7.2 开发工具推荐

VS Code 插件

浏览器插件

7.3 性能优化建议

代码分割

组件懒加载

7.4 部署准备

构建生产版本

本地预览构建结果

📝 8. 总结

8.1 安装要点回顾

8.2 下一步学习建议

8.3 相关资源链接

开发者彩蛋

总结