Vue3 起步

有了环境和项目骨架，本节正式"起步"：亲手写一个可交互的 Vue3 应用，理解数据如何驱动页面。整个过程只需要文本编辑器与浏览器。

准备最小工程

可以继续使用上一节创建的 vue3-demo，也可以新建一个：

npm create vue@latest hello-vue
cd hello-vue
npm install
npm run dev

保持终端运行，浏览器打开终端显示的 Local 地址，之后所有改动都会自动热更新。

写第一个组件

把 src/App.vue 的内容整体替换为：

<!-- src/App.vue -->
<template>
  <h1>{{ message }}</h1>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('我的第一个 Vue3 页面')
</script>

<style scoped>
h1 { color: #42b883; }
</style>

保存后浏览器标题显示"我的第一个 Vue3 页面"，页面出现绿色大标题，即渲染成功。

理解 ref 与响应式

<script setup> 中的普通变量不会触发界面更新，必须用 ref 包装成响应式数据： ```html <script setup> import { ref } from 'vue' const normal = '我不会引起更新' // 普通常量 const data = ref('我会随数据更新') // 响应式数据 </script>

在模板中使用 data 时无需写 .value（框架自动解包）；在脚本里读写则要写 data.value。

## 加上交互
把组件升级为一个点击计数器：

```html
<template>
  <p>计数：{{ count }}</p>
  <button @click="add">+1</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = () => { count.value++ }
</script>

页面显示"计数：0"，每点击一次按钮数字加 1。核心逻辑只有三步：声明响应式数据、编写方法、绑定点击事件。

用选项式 API 实现相同功能

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    add() { this.count++ }
  }
}
</script>

注意选项式写法要使用 this.count。运行效果与组合式完全一致，两种风格 Vue3 都支持。

起步常见问题

• 页面空白：检查终端是否报错，确认 src/main.js 中 mount('#app') 与 index.html 中的 id="app" 对应。
• 修改没生效：确认开发服务器仍在运行，保存文件后应自动刷新。
• 样式不生效：检查 <style> 是否位于 App.vue 内且写法正确。

小结

起步四步走：建项目、写 App.vue、用 ref 声明数据、在模板中用 {{ }} 展示并用 @click 交互。接下来深入学习模板语法与指令。