Vue 3 首次运行：让项目跑起来

上篇讲了项目结构，这篇让项目真正跑起来。顺便介绍一下开发服务器和热更新是什么。

启动开发服务器

进入项目目录，运行：

cd vue3-getting-started
pnpm dev

几秒钟后，看到这个输出：

VITE v5.x.x  ready in 1234 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.x.x:5173/

打开浏览器，访问 http://localhost:5173/，你应该能看到 Vue 的欢迎页。

为什么是 5173 端口

Vite 默认用 5173 端口。如果这个端口被占用了，会自动换下一个可用端口。

想换端口？在 vite.config.ts 里改：

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000  // 改成你想要的端口
  }
})

改完重启服务器（Ctrl + C 停止，再 pnpm dev）。

热更新是什么

热更新（Hot Module Replacement，简称 HMR）是 Vite 最有用的特性之一。

保存代码后，浏览器自动刷新，但只更新改了的部分，不会刷新整个页面。

试一下：

1. 浏览器打开 Vue 欢迎页
2. 打开 src/App.vue，把 <HelloWorld msg="Vite + Vue 3" /> 改成 <HelloWorld msg="Hello Vue" />
3. 保存

你会发现浏览器里的文字立刻变了，但页面没有闪烁或重载。这就是热更新。

好处是：

• 保存即所见，开发效率高
• 状态不会丢失（比如表单里填了一半的内容）
• 调试体验流畅

开发时和生产时的区别

开发时（pnpm dev）：

• 代码不打包，直接用 ES Module 原生加载
• 依赖在浏览器首次访问时一次性加载
• 有完整的错误提示和调试信息
• 速度快

生产时（pnpm build）：

• 代码打包、压缩、优化
• 体积最小化
• 无调试信息
• 部署到服务器

开发用 pnpm dev，上线用 pnpm build。

构建生产版本

pnpm build

完成后会生成一个 dist/ 目录，里面是打包好的文件，可以部署到任何静态服务器上。

预览构建结果：

pnpm preview

这会用本地服务器预览 dist/ 目录的内容。

常见问题

问题一：浏览器报错 "Module not found"

检查：

1. 文件路径是否正确（大小写敏感）
2. 文件扩展名是否写对（.vue 还是 .ts）
3. 文件是否在 src/ 目录下

问题二：改了配置不生效

Vite 配置改了需要重启服务器。Ctrl + C 停止，再 pnpm dev 启动。

问题三：页面空白但没报错

检查：

1. App.vue 里 <template> 是否只有一个根元素（Vue 3 模板只能有一个根节点）
2. main.ts 里 app.mount('#app') 的 #app 是否和 index.html 里的 id 对应

问题四：端口被占用

pnpm dev --port 3000

指定一个空闲端口。

你现在会了什么

• 用 pnpm dev 启动开发服务器
• 用 pnpm build 构建生产版本
• 体验了热更新：保存即所见
• 知道开发时和生产时的区别

下篇开始讲 Vue 的核心语法。先从响应式开始，这是 Vue 最重要的概念之一。