第一个 Vue 3 项目：Hello World

学习新技术的第一步往往是从一个简单的示例开始。通过创建一个基本的“Hello World”项目，你将快速体验 Vue 3 的核心功能，包括组件创建、数据绑定和事件处理。本节将使用 Vite 作为构建工具，带你一步步搭建并运行你的第一个 Vue 3 项目，感受它的开发流程和直观性。

准备工作

在开始之前，请确保你已完成第 3 节“安装与开发环境搭建”的准备工作：

  • Node.js 已安装（版本 16.x 或以上）。
  • 使用 Vite 创建了一个 Vue 3 项目（推荐方式）。
  • 安装了代码编辑器（如 VS Code）和 Volar 插件。

如果你尚未创建项目，可以参考上一节的步骤，使用以下命令快速初始化：

npm create vite@latest my-first-vue3 --template vue
cd my-first-vue3
npm install

项目目标

我们将创建一个简单的 Vue 3 应用，包含：

  • 一个显示“Hello World”的文本。
  • 一个计数器，点击按钮时数字增加。
  • 一个基本的组件结构，展示 Vue 3 的响应式特性。

实现步骤

1. 启动项目

进入项目目录并启动开发服务器：

npm run dev

打开浏览器，访问 http://localhost:5173（端口可能不同），你会看到 Vite 生成的默认页面。现在，我们将修改它。

2. 修改根组件

打开 src/App.vue，替换其内容为以下代码：

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>计数器：{{ count }}</p>
    <button @click="increment">点击增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello World');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { message, count, increment };
  }
};
</script>

<style scoped>
.container {
  text-align: center;
  padding: 20px;
}
h1 {
  color: #42b983;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

代码解析

  • 模板部分：使用双花括号 {{}} 绑定数据，@click 监听按钮点击事件。
  • 脚本部分：通过 setup() 使用 Composition API，ref 创建响应式变量，increment 函数更新计数器。
  • 样式部分：使用 scoped 确保样式仅作用于当前组件。

3. 检查入口文件

确认 src/main.js 的内容如下，确保应用正确挂载：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  • createApp 是 Vue 3 的新 API，用于创建应用实例。
  • #app 对应 index.html 中的挂载点。

4. 运行与测试

保存文件后，浏览器会自动刷新（得益于 Vite 的 HMR）。你应该看到：

  • 页面显示“Hello World”标题。
  • 一个计数器初始值为 0。
  • 点击按钮后，计数器增加。

尝试修改 message 的值（例如改为“Hello Vue 3!”），保存后观察页面实时更新。这展示了 Vue 3 的响应式能力。

扩展：添加组件

为了体验 Vue 3 的组件化开发，我们再添加一个简单的子组件。

1. 创建子组件

在 src/components/ 目录下创建 Counter.vue：

<template>
  <div>
    <p>子组件计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};
</script>

<style scoped>
p {
  color: #2c3e50;
}
button {
  margin-top: 10px;
}
</style>

2. 在根组件中使用

修改 src/App.vue，引入并使用 Counter 组件：

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>根组件计数器：{{ count }}</p>
    <button @click="increment">点击增加</button>
    <Counter />
  </div>
</template>

<script>
import { ref } from 'vue';
import Counter from './components/Counter.vue';

export default {
  setup() {
    const message = ref('Hello World');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return { message, count, increment };
  },
  components: { Counter }
};
</script>

<style scoped>
.container {
  text-align: center;
  padding: 20px;
}
h1 {
  color: #42b983;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

3. 验证结果

保存后，页面将显示根组件和子组件的两个独立计数器，各自的按钮只影响对应的计数。这体现了 Vue 3 组件的独立性和复用性。

常见问题与调试

  • 页面空白？ 检查 main.js 是否正确挂载，index.html 中是否有 #app。
  • 代码不更新？ 确认 Vite 开发服务器是否运行正常，尝试重启 npm run dev。
  • 控制台报错？ 使用浏览器开发者工具（F12）查看错误信息，或安装 Vue DevTools 插件（见第 10 章）。

总结

通过这个“Hello World”项目，你已经成功搭建并运行了一个 Vue 3 应用，初步体验了其响应式、组件化和快速开发的特点。这个简单的起点为后续学习奠定了基础。在接下来的章节中，我们将深入探讨 Vue 3 的模板语法、响应式原理和其他高级功能。继续动手实践吧，你的 Vue 3 之旅才刚刚开始！
Last Updated::