开发环境准备：Node.js、npm、VS Code安装配置

欣欣之王来了2026-10-11 20:54

工欲善其事，必先利其器。本文将手把手带你完成Vue3开发环境的搭建，包括Node.js的安装配置、npm包管理器的使用、VS Code编辑器的安装与插件配置，以及Vue3项目的创建和运行。全文约8500字，配图详尽，适合零基础读者。

一、开发环境总览

1.1 Vue3开发需要哪些工具？

#mermaid-svg-Rgxz535P3KfE9Phc{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Rgxz535P3KfE9Phc .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Rgxz535P3KfE9Phc .error-icon{fill:#552222;}#mermaid-svg-Rgxz535P3KfE9Phc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Rgxz535P3KfE9Phc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Rgxz535P3KfE9Phc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Rgxz535P3KfE9Phc .marker.cross{stroke:#333333;}#mermaid-svg-Rgxz535P3KfE9Phc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Rgxz535P3KfE9Phc p{margin:0;}#mermaid-svg-Rgxz535P3KfE9Phc .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Rgxz535P3KfE9Phc .cluster-label text{fill:#333;}#mermaid-svg-Rgxz535P3KfE9Phc .cluster-label span{color:#333;}#mermaid-svg-Rgxz535P3KfE9Phc .cluster-label span p{background-color:transparent;}#mermaid-svg-Rgxz535P3KfE9Phc .label text,#mermaid-svg-Rgxz535P3KfE9Phc span{fill:#333;color:#333;}#mermaid-svg-Rgxz535P3KfE9Phc .node rect,#mermaid-svg-Rgxz535P3KfE9Phc .node circle,#mermaid-svg-Rgxz535P3KfE9Phc .node ellipse,#mermaid-svg-Rgxz535P3KfE9Phc .node polygon,#mermaid-svg-Rgxz535P3KfE9Phc .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Rgxz535P3KfE9Phc .rough-node .label text,#mermaid-svg-Rgxz535P3KfE9Phc .node .label text,#mermaid-svg-Rgxz535P3KfE9Phc .image-shape .label,#mermaid-svg-Rgxz535P3KfE9Phc .icon-shape .label{text-anchor:middle;}#mermaid-svg-Rgxz535P3KfE9Phc .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Rgxz535P3KfE9Phc .rough-node .label,#mermaid-svg-Rgxz535P3KfE9Phc .node .label,#mermaid-svg-Rgxz535P3KfE9Phc .image-shape .label,#mermaid-svg-Rgxz535P3KfE9Phc .icon-shape .label{text-align:center;}#mermaid-svg-Rgxz535P3KfE9Phc .node.clickable{cursor:pointer;}#mermaid-svg-Rgxz535P3KfE9Phc .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Rgxz535P3KfE9Phc .arrowheadPath{fill:#333333;}#mermaid-svg-Rgxz535P3KfE9Phc .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Rgxz535P3KfE9Phc .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Rgxz535P3KfE9Phc .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Rgxz535P3KfE9Phc .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Rgxz535P3KfE9Phc .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Rgxz535P3KfE9Phc .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Rgxz535P3KfE9Phc .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Rgxz535P3KfE9Phc .cluster text{fill:#333;}#mermaid-svg-Rgxz535P3KfE9Phc .cluster span{color:#333;}#mermaid-svg-Rgxz535P3KfE9Phc div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Rgxz535P3KfE9Phc .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Rgxz535P3KfE9Phc rect.text{fill:none;stroke-width:0;}#mermaid-svg-Rgxz535P3KfE9Phc .icon-shape,#mermaid-svg-Rgxz535P3KfE9Phc .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Rgxz535P3KfE9Phc .icon-shape p,#mermaid-svg-Rgxz535P3KfE9Phc .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Rgxz535P3KfE9Phc .icon-shape .label rect,#mermaid-svg-Rgxz535P3KfE9Phc .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Rgxz535P3KfE9Phc .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Rgxz535P3KfE9Phc .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Rgxz535P3KfE9Phc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Vue3开发环境
Node.js

JavaScript运行环境

版本要求：18.0+
npm/pnpm

包管理器

管理项目依赖
Chrome/Edge

浏览器

运行和调试
VS Code

代码编辑器

最流行的前端IDE
Volar

VS Code插件

Vue3语法支持
Vue DevTools

浏览器插件

调试Vue应用

1.2 各工具的作用

工具 作用 是否必须 难度
Node.js 提供JavaScript运行时和npm 必须 简单
npm/pnpm 管理项目依赖包 必须 简单
VS Code 编写代码 强烈推荐 简单
Volar Vue3语法高亮和智能提示 强烈推荐 简单
Vue DevTools 浏览器中调试Vue应用 推荐 简单
Chrome/Edge 运行和调试Web应用 必须 无需配置

二、Node.js安装与配置

2.1 什么是Node.js？

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境。它让JavaScript可以脱离浏览器，在服务器端（或开发环境中）运行。

对于Vue3开发来说，Node.js有两个核心作用：

  1. 提供npm包管理器：用于安装Vue3、Vite、各种插件等依赖
  2. 运行开发工具：Vite开发服务器、构建工具等都需要Node.js环境

2.2 下载与安装Node.js

第一步：访问Node.js官网

打开浏览器，访问Node.js官方下载页面：https://nodejs.org/

你会看到两个版本供选择：

  • LTS（长期支持版）：推荐大多数用户使用，稳定可靠
  • Current（最新版）：包含最新特性，但可能不够稳定

Vue3项目推荐使用LTS版本，版本号至少18.0以上。

第二步：下载安装包

根据你的操作系统选择对应的安装包：

操作系统 下载格式 说明
Windows .msi（64位） 安装向导，双击运行
macOS .pkg 安装向导，双击运行
Linux 使用nvm或包管理器 推荐使用nvm

第三步：Windows安装步骤

  1. 双击下载的.msi安装包
  2. 点击"Next"进入下一步
  3. 勾选"接受许可协议"，点击"Next"
  4. 选择安装路径（建议使用默认路径），点击"Next"
  5. 选择安装组件（保持默认即可），点击"Next"
  6. 点击"Install"开始安装
  7. 安装完成后点击"Finish"

第四步：macOS安装步骤

  1. 双击下载的.pkg安装包
  2. 按照安装向导提示操作
  3. 输入管理员密码确认安装
  4. 安装完成后点击"关闭"

注意：macOS用户也可以使用Homebrew安装：

bash 复制代码 
brew install node@20

2.3 验证安装

安装完成后，打开终端（命令行）验证安装是否成功：

Windows打开终端的方式：

  • 按Win + R，输入cmd，回车
  • 或在开始菜单搜索"命令提示符"
  • 推荐使用Windows Terminal（可在Microsoft Store下载）

macOS打开终端的方式：

  • 在Launchpad中搜索"终端"
  • 或按Command + 空格，输入"Terminal"

在终端中输入以下命令：

bash 复制代码 
# 检查Node.js版本
node --version
# 应该输出类似：v20.x.x 或 v22.x.x

# 检查npm版本
npm --version
# 应该输出类似：10.x.x

# 检查npx版本
npx --version

如果看到版本号输出，说明安装成功！

2.4 npm的基本使用

npm（Node Package Manager）是Node.js的包管理器，用于安装、管理和共享JavaScript代码包。

bash 复制代码 
# 查看npm版本
npm --version

# 初始化一个新项目（创建package.json）
npm init
npm init -y  # 跳过问答，使用默认配置

# 安装依赖包
npm install <package-name>          # 安装到dependencies（生产依赖）
npm install <package-name> --save-dev  # 安装到devDependencies（开发依赖）
npm install -g <package-name>       # 全局安装

# 安装所有依赖（根据package.json）
npm install

# 卸载依赖包
npm uninstall <package-name>

# 更新依赖包
npm update <package-name>

# 运行scripts中定义的命令
npm run dev
npm run build
npm run test

# 查看已安装的包
npm list
npm list --depth=0  # 只看顶层依赖

2.5 配置npm镜像源（国内用户推荐）

由于npm官方仓库在国外，国内用户下载速度可能较慢。建议配置淘宝镜像源：

bash 复制代码 
# 查看当前镜像源
npm config get registry

# 设置为淘宝镜像源
npm config set registry https://registry.npmmirror.com/

# 恢复官方镜像源（如果需要）
npm config set registry https://registry.npmjs.org/

# 验证配置
npm config get registry

2.6 安装pnpm（推荐）

pnpm是一个更快、更省磁盘空间的包管理器。Vue3官方也推荐使用pnpm：

bash 复制代码 
# 使用npm全局安装pnpm
npm install -g pnpm

# 验证安装
pnpm --version

# pnpm的基本命令（与npm类似）
pnpm install          # 安装依赖
pnpm add <package>    # 添加依赖
pnpm add -D <package> # 添加开发依赖
pnpm remove <package> # 移除依赖
pnpm run dev          # 运行脚本

pnpm vs npm：

特性 npm pnpm
安装速度 一般 快
磁盘占用 大（每个项目独立存储） 小（全局存储，硬链接）
node_modules结构 扁平化 非扁平化（更严格）
锁文件 package-lock.json pnpm-lock.yaml
monorepo支持 一般 优秀

三、VS Code安装与配置

3.1 为什么选择VS Code？

VS Code（Visual Studio Code）是微软开发的一款免费、开源的代码编辑器。它是目前前端开发领域最流行的编辑器，也是Vue3官方推荐的开发工具。

VS Code的优势：

  • 免费开源：完全免费，无需付费
  • 轻量快速：启动快，占用资源少
  • 插件丰富：海量插件，满足各种需求
  • Vue3生态完善：Volar插件提供极好的Vue3支持
  • 内置终端：编辑器内直接运行命令
  • Git集成：内置Git版本控制功能

3.2 下载与安装VS Code

第一步：访问官网下载

打开浏览器，访问VS Code官网：https://code.visualstudio.com/

点击"Download"按钮，会自动识别你的操作系统并下载对应版本。

第二步：安装

Windows：

  1. 双击下载的.exe安装包
  2. 接受许可协议
  3. 选择安装路径（建议默认）
  4. 重要 ：勾选以下选项：
    • ✅ "将'通过Code打开'操作添加到目录上下文菜单"
    • ✅ "将'通过Code打开'操作添加到文件上下文菜单"
    • ✅ "添加到PATH"
  5. 点击"安装"
  6. 完成后启动VS Code

macOS：

  1. 双击下载的.zip文件解压
  2. 将Visual Studio Code.app拖到应用程序文件夹
  3. 双击打开即可

3.3 VS Code界面介绍

打开VS Code后，你会看到以下界面：

复制代码 
┌──────────────────────────────────────────────────┐
│  菜单栏：文件 编辑 选择 查看 转到 运行 终端 帮助  │
├────────┬─────────────────────────────────────────┤
│ 活动栏  │                                         │
│        │                                         │
│  📁   │        编辑器区域                        │
│  🔍   │        （写代码的地方）                   │
│  🔀   │                                         │
│  🐛   │                                         │
│  📦   │                                         │
│        │                                         │
├────────┴─────────────────────────────────────────┤
│  状态栏：显示当前文件信息、行号、编码等           │
└──────────────────────────────────────────────────┘

活动栏图标说明：

图标 名称 功能
📁 资源管理器 浏览项目文件
🔍 搜索 全局搜索文件内容
🔀 源代码管理 Git版本控制
🐛 运行和调试 调试代码
📦 扩展 管理插件

3.4 必装插件

打开VS Code，点击左侧活动栏的"扩展"图标（或按Ctrl+Shift+X），搜索并安装以下插件：

（1）Volar（必装）

Volar是Vue3开发的官方推荐插件，提供：

  • .vue文件语法高亮

  • 模板中的智能提示

  • TypeScript类型检查

  • 组件自动导入提示

    搜索：Volar
    安装：Vue - Official（作者：Vue）

注意：如果你之前安装了Vetur（Vue2的插件），需要先禁用Vetur，否则会与Volar冲突。

（2）中文语言包（可选）

复制代码 
搜索：Chinese (Simplified)
安装：Chinese (Simplified) Language Pack

安装后重启VS Code即可看到中文界面。

（3）其他推荐插件

插件名称 用途 推荐指数
ESLint 代码规范检查 ⭐⭐⭐⭐⭐
Prettier 代码格式化 ⭐⭐⭐⭐⭐
Auto Rename Tag 自动重命名配对的HTML标签 ⭐⭐⭐⭐
Path Intellisense 文件路径自动补全 ⭐⭐⭐⭐
GitLens Git增强工具 ⭐⭐⭐⭐
Color Highlight 颜色值预览 ⭐⭐⭐
Material Icon Theme 文件图标美化 ⭐⭐⭐
Error Lens 行内显示错误提示 ⭐⭐⭐⭐

3.5 VS Code基本设置

打开设置（Ctrl+,或Cmd+,），推荐修改以下设置：

json 复制代码 
{
    // 保存时自动格式化
    "editor.formatOnSave": true,

    // 默认使用Prettier格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    // 字体大小
    "editor.fontSize": 14,

    // 行高
    "editor.lineHeight": 24,

    // 缩进
    "editor.tabSize": 2,
    "editor.insertSpaces": true,

    // 自动换行
    "editor.wordWrap": "on",

    // 保存时自动修复ESLint问题
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },

    // 文件末尾自动添加空行
    "files.insertFinalNewline": true,

    // 自动删除行尾空格
    "files.trimTrailingWhitespace": true,

    // 终端设置
    "terminal.integrated.fontSize": 13
}

3.6 VS Code常用快捷键

快捷键（Windows） 快捷键（macOS） 功能
Ctrl+S Cmd+S 保存文件
Ctrl+Z Cmd+Z 撤销
Ctrl+Y Cmd+Shift+Z 重做
Ctrl+D Cmd+D 选中下一个相同内容
Ctrl+F Cmd+F 在文件中搜索
Ctrl+Shift+F Cmd+Shift+F 全局搜索
Ctrl+P Cmd+P 快速打开文件
Ctrl+` Cmd+` 打开/关闭终端
Ctrl+B Cmd+B 打开/关闭侧边栏
Ctrl+Shift+P Cmd+Shift+P 命令面板
Ctrl+/ Cmd+/ 注释/取消注释
Alt+↑/↓ Opt+↑/↓ 上下移动行
Shift+Alt+↓ Shift+Opt+↓ 向下复制一行
Ctrl+Shift+K Cmd+Shift+K 删除当前行
F2 F2 重命名符号

四、创建第一个Vue3项目

4.1 使用create-vue创建项目

现在环境已经搭建好了，让我们创建第一个Vue3项目。打开终端（可以在VS Code中按`Ctrl+``打开内置终端），输入：

bash 复制代码 
# 使用npm创建
npm create vue@latest

# 或使用pnpm创建（推荐）
pnpm create vue@latest

执行后会看到交互式配置向导：

复制代码 
┌────────────────────────────────────────────────────┐
│                                                    │
│  Vue.js - The Progressive JavaScript Framework     │
│                                                    │
│  ✔ Project name: ... my-first-vue-app              │
│  ✔ Add TypeScript? ... No / Yes                      │
│  ✔ Add JSX Support? ... No / Yes                     │
│  ✔ Add Vue Router for Single Page Application      │
│    development? ... No / Yes                          │
│  ✔ Add Pinia for state management? ... No / Yes      │
│  ✔ Add Vitest for Unit Testing? ... No / Yes         │
│  ✔ Add an End-to-End Testing Solution?             │
│    >> No                                             │
│    >> Cypress                                        │
│    >> Playwright                                     │
│  ✔ Add ESLint for code quality? ... No / Yes         │
│  ✔ Add Prettier for code formatting? ... No / Yes    │
│                                                    │
└────────────────────────────────────────────────────┘

对于初学者，建议选择：

选项 建议 理由
Project name 自定义 使用英文小写，用-分隔
TypeScript No 先学JS，TS后续再学
JSX Support No Vue3用模板语法，不需要JSX
Vue Router Yes 页面路由是常用功能
Pinia Yes 状态管理是常用功能
Vitest No 测试后续再学
E2E Testing No 端到端测试后续再学
ESLint Yes 保持代码规范
Prettier No 可以先不加，简化配置

4.2 安装依赖并启动项目

bash 复制代码 
# 进入项目目录
cd my-first-vue-app

# 安装依赖
npm install
# 或使用pnpm：pnpm install

# 启动开发服务器
npm run dev
# 或使用pnpm：pnpm run dev

启动成功后会看到：

复制代码 
  VITE v5.x.x  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

在浏览器中打开 http://localhost:5173/，你就能看到Vue3的欢迎页面！

4.3 项目结构回顾

复制代码 
my-first-vue-app/
├── .vscode/                # VS Code配置
├── node_modules/           # 依赖包（不要手动修改）
├── public/                 # 静态资源（不经过构建）
│   └── favicon.ico         # 网站图标
├── src/                    # 源代码（主要工作区）
│   ├── assets/             # 资源文件
│   │   ├── base.css        # 基础CSS
│   │   └── main.css        # 全局CSS
│   ├── components/         # 可复用组件
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons/          # 图标组件
│   ├── router/             # 路由配置
│   │   └── index.js
│   ├── stores/             # Pinia状态管理
│   │   └── counter.js
│   ├── views/              # 页面组件
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── .gitignore              # Git忽略文件
├── index.html              # HTML入口
├── package.json            # 项目配置
├── vite.config.js          # Vite配置
└── README.md               # 项目说明

4.4 修改代码，体验热更新

打开src/views/HomeView.vue，修改为以下内容：

html 复制代码 
<script setup>
import { ref } from 'vue'

const message = ref('欢迎来到Vue3的世界！')
const count = ref(0)
</script>

<template>
  <div class="home">
    <h1>{{ message }}</h1>
    <div class="counter">
      <p class="count">{{ count }}</p>
      <button @click="count++">点击 +1</button>
      <button @click="count = 0">重置</button>
    </div>
  </div>
</template>

<style scoped>
.home {
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
}

h1 {
  color: #42b883;
  font-size: 24px;
}

.count {
  font-size: 64px;
  font-weight: bold;
  color: #35495e;
  margin: 20px 0;
}

button {
  padding: 10px 20px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  background: #42b883;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background: #35495e;
}

button:last-child {
  background: #e0e0e0;
  color: #333;
}
</style>

保存后，浏览器会自动刷新（无需手动刷新），这就是**Vite的热模块替换（HMR）**功能。

五、Vue DevTools安装

5.1 什么是Vue DevTools？

Vue DevTools是一个浏览器扩展，用于调试Vue应用。安装后，你可以在浏览器的开发者工具中看到：

  • 组件树（Component Tree）
  • 组件数据（Props、State）
  • 路由信息
  • Pinia Store状态
  • 事件时间线
  • 性能分析

5.2 安装步骤

Chrome/Edge浏览器：

  1. 打开Chrome网上应用店（或Edge扩展商店）
  2. 搜索"Vue.js devtools"
  3. 选择Vue.js devtools（确认是官方版本）
  4. 点击"添加到Chrome"（或"获取"）
  5. 安装完成后，浏览器右上角会出现Vue图标

注意：安装的是Vue DevTools的V6+版本，兼容Vue3。如果之前安装了V5版本（Vue2），需要更新。

5.3 使用Vue DevTools

  1. 打开你的Vue3应用（http://localhost:5173/）
  2. 按F12打开浏览器开发者工具
  3. 找到"Vue"标签页
  4. 你会看到组件树、数据、事件等信息

六、常见问题与解决方案

6.1 Node.js相关问题

问题：node命令找不到

复制代码 
解决：重新安装Node.js，确保安装时勾选了"添加到PATH"
或者在系统环境变量中手动添加Node.js的安装路径

问题：npm安装包很慢

复制代码 
解决：配置淘宝镜像源
npm config set registry https://registry.npmmirror.com/

问题：npm install报错

复制代码 
解决：
1. 删除node_modules文件夹和package-lock.json
2. 清除npm缓存：npm cache clean --force
3. 重新安装：npm install

6.2 VS Code相关问题

问题：Volar没有语法高亮

复制代码 
解决：
1. 确保安装了Volar（Vue - Official）插件
2. 如果之前安装了Vetur，禁用或卸载Vetur
3. 重启VS Code

问题：.vue文件中的TypeScript报错

复制代码 
解决：
1. 确保安装了TypeScript：npm install -D typescript
2. 在项目根目录创建tsconfig.json（如果使用TS）
3. 或在VS Code设置中禁用Volar的TS检查（如果不用TS）

6.3 项目启动问题

问题：npm run dev报错"端口被占用"

复制代码 
解决：
1. 找到占用端口的程序：netstat -ano | findstr :5173
2. 结束该进程，或修改vite.config.js中的端口号
javascript 复制代码 
// vite.config.js ------ 修改端口
export default defineConfig({
    server: {
        port: 3000  // 自定义端口
    }
})

问题：npm run dev报错"找不到模块"

复制代码 
解决：重新安装依赖
npm install

七、开发环境配置总结

7.1 环境检查清单

完成本文的配置后，你应该确认以下各项：

  • Node.js已安装，版本 >= 18.0
  • npm或pnpm已安装，可以正常使用
  • npm镜像源已配置（国内用户）
  • VS Code已安装
  • Volar插件已安装
  • 成功创建了一个Vue3项目
  • 项目可以正常启动（npm run dev）
  • 浏览器可以正常访问 http://localhost:5173/
  • Vue DevTools已安装

7.2 版本信息确认

bash 复制代码 
# 在终端中运行以下命令，确认版本信息
node --version      # 应 >= v18.0.0
npm --version       # 应 >= v9.0.0
pnpm --version      # 如果安装了pnpm
code --version      # VS Code版本

7.3 下一步学习

恭喜你！开发环境已经搭建完成。现在你可以：

  1. 探索项目结构：了解每个文件和目录的作用
  2. 修改代码 ：尝试修改App.vue和HomeView.vue中的内容
  3. 学习模板语法：开始学习Vue3的模板语法和指令
  4. 创建组件：尝试创建自己的Vue组件

本文是《Vue3从入门到精通》系列专栏的第十篇文章。 现在你的开发环境已经准备就绪，下一篇文章将带你开始Vue3的核心学习------模板语法入门，从最简单的文本插值开始，逐步掌握Vue3的所有指令。

下一篇预告：《Vue模板语法入门：HTML+JS的优雅结合》------从{{ }}文本插值到v-bind、v-on等核心指令，全面掌握Vue3的模板语法体系。

相关推荐
Lost_the_wind1 小时前
MySQL 学习笔记三
笔记·学习·mysql
刘天远1 小时前
Agent成本核算实现：事件表、状态分布与Python归集
前端·数据库·人工智能·python
Dawson Zhu1 小时前
《Agentic Design Patterns》第 11 章导读：目标设定与监控（Goal Setting and Monitoring）
人工智能·语言模型·架构·aigc·agi
xiaolinudao1231 小时前
将多个 Excel 表格中的数据合并到单个表中｜6 种实现方案全解析
java·前端·excel
Wang's Blog1 小时前
Java 项目部署之 Docker工具快速入门: Docker 架构拆解：镜像、容器、守护进程与 Registry
java·docker·架构
FYKJ_20102 小时前
django个性化新闻推荐35173-计算机课程设计、毕业设计
java·spring boot·后端·python·架构·django·课程设计
RoboWizard2 小时前
搭配W790芯片组的超频服务器内存（架构选型）FAQ合集
运维·服务器·架构
LRL_2 小时前
跨平台 Node 模块安装指南：如何利用 pnpm/npm 配置`supportedArchitectures` 锁定平台依赖
前端·npm·node.js
火眼金睛记单词2 小时前
阅读理解核心词汇：破解英语阅读难题的利器
经验分享·学习
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10Telegram APK 下载安装完整指南 — 2026年最新