Vue3——第 2 篇：开发环境搭建与第一个 Vue 应用-二趣网

本篇定位：在理解 Vue 的基本概念之后，我们需要真正"把代码跑起来"。本篇将带你从零开始，一步步搭建 Vue 3 开发环境，创建并运行你的第一个 Vue 应用，并深入理解项目目录结构。读完本篇，你将拥有一个可以持续开发的 Vue 工作台。

一、环境准备：Node.js 与包管理器

Vue 3 项目依赖Node.js环境。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它让我们可以在服务器端运行 JavaScript，更重要的是，它带来了npm（Node Package Manager）——JavaScript 世界的包管理工具，我们可以通过它下载和管理 Vue 及其生态依赖。

1.1 安装 Node.js

版本要求：Vue 3 要求 Node.js16.0 及以上版本（推荐使用最新的18.x LTS或20.x LTS长期支持版本）。

下载安装：

访问 Node.js 官网（nodejs.org），下载对应操作系统的 LTS 版本安装包（.msi/.pkg/.tar.gz）
双击安装，一路默认选项即可（建议勾选"自动安装必要工具"）
安装完成后，打开终端（Terminal / CMD / PowerShell），输入以下命令验证安装是否成功：

node-v# 输出类似：v20.10.0npm-v# 输出类似：10.2.3

💡 进阶推荐：建议使用nvm（Node Version Manager）来管理 Node.js 版本，这样可以在不同项目间灵活切换 Node 版本，避免版本冲突。
macOS/Linux：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
Windows：使用 nvm-windows

1.2 选择你的包管理器

有了 Node.js，你就自动拥有了npm。但除了 npm，Vue 生态中还常用到另外两个包管理器，你可以根据自己的喜好选择：

包管理器	特点	命令示例
npm	Node 官方默认，稳定可靠	`npm install`
yarn	Meta 出品，速度快，有 lock 文件保证一致性	`yarn add`
pnpm	极力推荐！速度快、节省磁盘空间、天然支持 monorepo	`pnpm install`

本教程统一使用pnpm作为包管理器（Vue 官方团队也普遍推荐）。如果你尚未安装 pnpm，可以通过npm install -g pnpm全局安装。

二、编辑器配置：VSCode + Volar

工欲善其事，必先利其器。一个强大的编辑器配置能让 Vue 开发体验提升十倍。

2.1 安装 Visual Studio Code

如果你还没有安装编辑器，请前往 code.visualstudio.com 下载并安装 VSCode。它是目前全球最流行的前端开发编辑器，免费、开源、生态极其丰富。

2.2 安装 Vue 专用插件（核心必装）

在 VSCode 的扩展面板（快捷键Ctrl+Shift+X/Cmd+Shift+X）中搜索并安装以下插件：

① Vue - Official（原 Volar）—— 必装

插件 ID：Vue.volar
这是 Vue 3 的官方语言支持插件，提供 Vue 单文件组件（.vue）的语法高亮、智能提示、类型检查、自动补全、格式化等核心能力。
⚠️ 重要提醒：如果你之前安装过Vetur（Vue 2 时代的流行插件），请务必禁用或卸载它。Vetur 与 Volar 会相互冲突，导致 Vue 3 项目中出现各种奇怪的报错和语法提示错乱。Volar 对 Vue 3 + TypeScript 的支持远超 Vetur。

② TypeScript Vue Plugin（Volar 的 TS 辅助）

插件 ID：Vue.vscode-typescript-vue-plugin
这个插件让 VSCode 内置的 TypeScript 语言服务能够识别.vue文件中的类型，提供更精准的跨文件类型推导。

③ 其他推荐辅助插件（可选，但强烈推荐）

插件名称	插件 ID	作用
ESLint	`dbaeumer.vscode-eslint`	代码规范检查，保持代码风格一致
Prettier	`esbenp.prettier-vscode`	自动格式化代码，一键美化
Auto Close Tag	`formulahendry.auto-close-tag`	自动闭合 HTML 标签
Auto Rename Tag	`formulahendry.auto-rename-tag`	自动同步修改对应的配对标签名
Vite	`antfu.vite`	Vite 项目的快捷运行与调试

三、创建你的第一个 Vue 3 项目

过去创建 Vue 项目需要手动配置 Webpack 等复杂构建工具。如今，Vue 官方提供了新一代脚手架工具create-vue，它基于 Vite 构建，开箱即用，秒级启动。

3.1 使用 create-vue 创建项目

打开终端，进入你希望存放项目的目录（如桌面或~/projects），然后运行以下命令：

# 使用 npmnpmcreate vue@latest# 或使用 pnpm (推荐)pnpmcreate vue@latest

命令解读：

create-vue是 Vue 官方最新一代的项目脚手架工具，它会自动拉取模板并引导你进行项目配置。
@latest表示使用最新版本。

3.2 交互式配置选项

运行命令后，终端会进入交互式问答模式。你只需按键盘的方向键和回车键进行选择：

✔ Project name: … my-first-vue-app ✔ Add TypeScript? … No / Yes (推荐选 Yes，本教程全系列使用 TS) ✔ Add JSX Support? … No / Yes (一般选 No) ✔ Add Vue Router for Single Page Application development? … No / Yes (后续再讲，先选 No) ✔ Add Pinia for state management? … No / Yes (后续再讲，先选 No) ✔ Add Vitest for Unit Testing? … No / Yes (后续再讲，先选 No) ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright (暂选 No) ✔ Add ESLint for code quality? … No / Yes (强烈建议选 Yes) ✔ Add Prettier for code formatting? … No / Yes (强烈建议选 Yes)

推荐选择（为了后续学习顺畅，建议参考以下配置）：

配置项	选择	说明
Project name	`my-first-vue-app`	项目名，只能小写字母、数字、连字符
TypeScript	✅Yes	后续教程全面基于 TS，请一定开启
JSX	❌ No	Vue 生态基本不用 JSX，用模板语法
Vue Router	❌ No	第 20 篇专项讲解，届时再添加
Pinia	❌ No	第 22 篇专项讲解
Vitest	❌ No	第 33 篇专项讲解
E2E Test	❌ No	暂不涉及
ESLint	✅ Yes	保持代码规范
Prettier	✅ Yes	自动格式化代码

选择完毕后，create-vue会自动生成项目结构并安装依赖（这个过程可能需要几十秒到几分钟，取决于网络状况）。

3.3 如果安装依赖失败怎么办？

由于网络原因（特别是访问 npm 官方源较慢），有时依赖安装会失败。此时可以尝试以下解决方案：

方案一：使用国内镜像源

# 设置淘宝镜像源pnpmconfigsetregistry https://registry.npmmirror.com# 重新安装依赖pnpminstall

方案二：使用官方脚手架手动安装
在生成项目后，进入项目目录手动执行安装：

cdmy-first-vue-apppnpminstall

四、项目目录结构深度解析

让我们进入刚刚创建的项目文件夹，用 VSCode 打开它，看看里面都有些什么。

my-first-vue-app/ ├── .vscode/ # VSCode 配置目录 │ └── extensions.json # 推荐插件列表 ├── public/ # 静态资源目录（不经过构建处理） │ └── favicon.ico # 网站图标 ├── src/ # 核心源代码目录（重中之重） │ ├── assets/ # 资源目录（图片、样式等，会经过构建处理） │ │ ├── base.css # 基础全局样式 │ │ ├── logo.svg # Vue logo │ │ └── main.css # 主样式文件 │ ├── components/ # 公共组件目录 │ │ └── HelloWorld.vue # 示例组件 │ ├── App.vue # 根组件（整个应用的入口组件） │ ├── main.ts # 应用入口文件（创建 Vue 实例） │ └── vite-env.d.ts # Vite 环境变量类型声明 ├── .eslintrc.cjs # ESLint 配置文件（代码规范） ├── .gitignore # Git 忽略文件配置 ├── .prettierrc.json # Prettier 配置文件（代码格式化） ├── index.html # 宿主 HTML 文件（真正的浏览器入口） ├── package.json # 项目配置文件（依赖列表、脚本命令） ├── pnpm-lock.yaml # 依赖版本锁定文件（pnpm 专用） ├── README.md # 项目说明文档 ├── tsconfig.json # TypeScript 编译配置 └── vite.config.ts # Vite 构建配置

⚠️ 极简项目揭示：一个 Vue 3 项目虽然文件众多，但最核心的只有index.html（容器）、src/main.ts（入口）和src/App.vue（根组件）。其他文件都属于"基础设施"。

下面我们逐一深入解析几个最重要的文件：

4.1 index.html —— 应用的容器

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><linkrel="icon"type="image/svg+xml"href="/vite.svg"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Vite + Vue + TS</title></head><body><!-- Vue 应用的挂载点（容器） --><divid="app"></div><scripttype="module"src="/src/main.ts"></script></body></html>

关键点：

<div id="app"></div>—— 这是 Vue 将要接管并渲染内容的挂载点。所有 Vue 生成的 DOM 内容都会插入到这个 div 内部。
<script type="module" src="/src/main.ts">—— 浏览器原生支持 ES Module，直接加载入口文件main.ts，Vite 利用这一点实现了极速开发服务器。

4.2 src/main.ts —— 应用的入口

import{createApp}from'vue'// 导入全局样式import'./assets/main.css'// 导入根组件importAppfrom'./App.vue'// 创建 Vue 应用实例，挂载到 #app 元素上createApp(App).mount('#app')

逐行解读：

createApp(App)—— Vue 3 的入口函数。它接收根组件App，返回一个应用实例。
.mount('#app')—— 将应用实例挂载到index.html中 id 为app的元素上。Vue 会接管该元素内部的所有内容。
注意对比 Vue 2 的写法（new Vue({...}).$mount('#app')），Vue 3 的createAppAPI 更加清晰，且避免了全局配置污染（这是 Vue 3 的重要改进）。

💡 深入理解：在 Vue 3 中，createApp返回的应用实例是一个独立的应用上下文。如果你在同一页面中有多个 Vue 应用（如微前端场景），可以多次调用createApp，它们互不干扰——这是与 Vue 2new Vue()全局单例的根本不同。

4.3 src/App.vue —— 根组件（单文件组件）

App.vue是一个单文件组件（Single File Component，简称 SFC），它把模板、脚本、样式聚合在一个文件中：

<script setup lang="ts"> import HelloWorld from './components/HelloWorld.vue' import TheWelcome from './components/TheWelcome.vue' </script> <template> <header> <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorld msg="You did it!" /> <TheWelcome /> </div> </header> </template> <style scoped> /* scoped 表示样式只作用于当前组件，不会泄露到全局 */ header { line-height: 1.5; } /* ... 更多样式 */ </style>

结构拆解：

<script setup>—— Vue 3 的组合式 API 语法糖。setup表示代码在组件实例创建前执行（处于beforeCreate和created之间）。lang="ts"表示使用 TypeScript。
<template>—— 组件的 HTML 模板。你在模板中写的任何内容都会被 Vue 编译并渲染。
<style scoped>—— 样式部分。scoped属性使得样式仅对当前组件生效，Vue 会自动为元素添加唯一属性（如data-v-xxxxx）来实现样式隔离。

4.4 package.json —— 项目的"身份证"

打开package.json，我们可以看到项目的依赖和脚本命令：

{"name":"my-first-vue-app","version":"0.0.0","private":true,"scripts":{"dev":"vite",// 启动开发服务器"build":"vue-tsc && vite build",// 构建生产版本（先做类型检查）"preview":"vite preview"// 预览生产构建结果},"dependencies":{"vue":"^3.4.0"// 生产依赖：Vue 核心库},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0",// Vite 的 Vue 插件"typescript":"^5.2.0",// TypeScript"vite":"^5.0.0",// Vite 构建工具"vue-tsc":"^2.0.0"// Vue 的 TypeScript 命令行工具}}

重点关注的scripts字段（你后续开发最常用的命令）：

命令	功能	使用场景
`pnpm run dev`	启动开发服务器（热更新，秒级启动）	开发阶段，99% 的时间都在用它
`pnpm run build`	构建生产环境打包文件（输出到 dist 目录）	上线部署前执行
`pnpm run preview`	本地预览生产包	打包后检查效果

五、运行项目，看见 Hello World

5.1 启动开发服务器

在项目根目录下，执行：

pnpmrun dev

终端中将会输出类似以下信息：

VITE v5.0.10 ready in 356 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help

打开浏览器，访问http://localhost:5173/，你将看到 Vue 官方的欢迎页面！

恭喜你！你的第一个 Vue 应用已经成功运行了！🎉

5.2 体验热更新（HMR）

保持服务器运行状态，打开src/App.vue，将<template>中的内容做简单修改：

<template> <div> <h1>我的第一个 Vue 应用！</h1> <p>Hello, Vue 3 World! 🚀</p> </div> </template>

保存文件（Ctrl+S/Cmd+S），神奇的事情发生了：浏览器页面自动刷新，并立即显示你刚刚修改的内容，整个过程不到 1 秒。

这便是Vite 的热模块替换（HMR）能力。它不同于传统的整页刷新（F5），而是只替换更新的模块，保留页面状态，开发体验极其流畅。

5.3 修改 HelloWorld 看看完整流程

我们尝试删除src/components/HelloWorld.vue中的示例代码，改为我们自己的内容：

<script setup lang="ts"> // 定义父组件传递的属性 defineProps<{ msg: string }>() </script> <template> <div class="card"> <h2>{{ msg }}</h2> <p>这是从父组件传递过来的消息！</p> </div> </template> <style scoped> .card { padding: 20px; border-radius: 8px; background-color: #f9f9f9; } </style>

然后回到App.vue，修改调用方式：

<template> <div> <HelloWorld msg="欢迎进入 Vue 的世界！" /> </div> </template>

保存后，页面即刻更新，显示：

欢迎进入 Vue 的世界！
这是从父组件传递过来的消息！

这个简单的修改流程，实际上已经完整地展示了一个 Vue 组件的运作模式：

父组件（App）通过prop（属性）msg向子组件（HelloWorld）传递数据。
子组件使用defineProps接收数据，并在模板中通过插值表达式{{ msg }}渲染。

六、常见问题排查

初次搭建环境，难免会遇到一些问题。以下是几个高频问题及解决方案：

问题现象	可能原因	解决方案
`pnpm: command not found`	未全局安装 pnpm	执行`npm install -g pnpm`
`vite`命令无法识别	依赖未安装成功	删除`node_modules`和`pnpm-lock.yaml`，重新执行`pnpm install`
页面显示空白且无报错	端口被占用或挂载点错误	检查`index.html`中是否存在`<div id="app">`；换用`pnpm run dev -- --port 3000`指定端口
TypeScript 报红但能运行	Volar 未正确识别项目	在项目根目录执行`pnpm run vue-tsc -- --noEmit`；或重启 VSCode，`Ctrl+Shift+P`执行`Developer: Reload Window`
保存后页面不自动刷新	HMR 失效或文件监听未开启	检查是否使用了网络驱动器；重启开发服务器；查看终端是否有错误日志

七、本篇小结

在本篇中，我们完成了 Vue 3 开发环境从零到一的完整搭建，主要成果：

步骤	关键动作	核心知识点
环境准备	安装 Node.js + pnpm	Vue 3 要求 Node 16+；pnpm 是高效包管理器
编辑器配置	安装 VSCode + Volar	务必禁用 Vetur，否则会冲突
创建项目	`pnpm create vue@latest`	交互式配置，推荐开启 TypeScript + ESLint + Prettier
目录理解	解析`index.html`/`main.ts`/`App.vue`	`#app`是挂载点；`createApp`创建 Vue 实例；`.vue`是单文件组件
运行项目	`pnpm run dev`	Vite 提供秒级启动和 HMR 热更新
首轮修改	修改模板内容	直观体验「数据驱动视图」的响应式流程

八、思考与练习

动手实验：尝试修改src/components/HelloWorld.vue的样式背景色为蓝色，并观察修改后页面是否立即变化。
加深理解：在main.ts中把.mount('#app')改成.mount('#non-exist')，保存后看页面会发生什么？解释原因。
版本升级：尝试在package.json中将vue的版本号手动改成^3.5.0，然后运行pnpm install升级到最新次版本，观察是否存在兼容性问题。
探索思考：为什么 Vue 3 要设计createApp函数，而不是像 Vue 2 那样直接new Vue()？这解决了什么问题？（提示：想想全局配置的污染问题）

下篇预告

到目前为止，我们已经有了一个可运行的项目环境。第 3 篇我们将正式进入 Vue 的模板语法学习——你将掌握：

{{ }}插值表达式如何渲染数据
v-bind如何动态绑定 HTML 属性
在模板中写 JavaScript 表达式的规则
Vue 指令系统的全面概览

企业官网建设流程全解析

一、环境准备：Node.js 与包管理器

1.1 安装 Node.js

1.2 选择你的包管理器

二、编辑器配置：VSCode + Volar

2.1 安装 Visual Studio Code

2.2 安装 Vue 专用插件（核心必装）

三、创建你的第一个 Vue 3 项目

3.1 使用 create-vue 创建项目

3.2 交互式配置选项

3.3 如果安装依赖失败怎么办？

四、项目目录结构深度解析

4.1 index.html —— 应用的容器

4.2 src/main.ts —— 应用的入口

4.3 src/App.vue —— 根组件（单文件组件）

4.4 package.json —— 项目的"身份证"

五、运行项目，看见 Hello World

5.1 启动开发服务器

5.2 体验热更新（HMR）

5.3 修改 HelloWorld 看看完整流程

六、常见问题排查

七、本篇小结

八、思考与练习

下篇预告

热门文章

文章分类

标签云

需要专业的网站建设服务？

企业官网建设流程全解析

一、环境准备：Node.js 与包管理器

1.1 安装 Node.js

1.2 选择你的包管理器

二、编辑器配置：VSCode + Volar

2.1 安装 Visual Studio Code

2.2 安装 Vue 专用插件（核心必装）

三、创建你的第一个 Vue 3 项目

3.1 使用 create-vue 创建项目

3.2 交互式配置选项

3.3 如果安装依赖失败怎么办？

四、项目目录结构深度解析

4.1 index.html —— 应用的容器

4.2 src/main.ts —— 应用的入口

4.3 src/App.vue —— 根组件（单文件组件）

4.4 package.json —— 项目的"身份证"

五、运行项目，看见 Hello World

5.1 启动开发服务器

5.2 体验热更新（HMR）

5.3 修改 HelloWorld 看看完整流程

六、常见问题排查

七、本篇小结

八、思考与练习

下篇预告

热门文章

文章分类

标签云

相关文章

Agentic-RL实战：如何用强化学习让大模型学会多步工具调用

可直接集成的粒子滤波工程代码：支持ROS2/边缘设备的实时定位与跟踪

基于Nacos与Spring Boot的轻量级任务调度方案

需要专业的网站建设服务？