Vue 项目与 API 风格

这一课你将能做到

1. 说清楚 Vue 3 在前端生态中的位置，以及它解决什么问题
2. 用 Vite 创建一个可运行的 Vue 3 项目
3. 区分组合式 API 与选项式 API，并始终使用 <script setup> 组合式写法
4. 理解单文件组件（SFC）的三段式结构

为什么要学

Vue 是目前国内使用最广泛的前端框架之一。你写的 HTML/CSS/JS 只是「静态页面」，而真实项目是「数据驱动的动态应用」——用户登录、列表刷新、表单提交、路由跳转，全靠框架帮你管理数据与视图的同步。

人话：Vue 就像你给 HTML 请了一个「管家」。你告诉管家「数据变了，页面跟着变」，剩下的脏活累活（DOM 操作、事件绑定、状态同步）全由 Vue 自动完成。

先建立图像

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

<template>
  <button @click="count++">点了 {{ count }} 次</button>
</template>

浏览器渲染后：

[点了 0 次]   ← 点一下按钮
[点了 1 次]   ← 页面自动更新，不用手动改 DOM

跟着做

步骤 1：用 Vite 创建项目

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

浏览器打开 http://localhost:5173，看到欢迎页即成功。

步骤 2：认识项目结构

my-vue-app/
├─ index.html          ← 入口 HTML
├─ vite.config.js      ← Vite 配置
├─ package.json
└─ src/
   ├─ main.js          ← 应用入口，创建 Vue 实例
   ├─ App.vue          ← 根组件
   └─ components/      ← 子组件目录

步骤 3：改造 App.vue

把 src/App.vue 内容全部替换为：

<script setup>
import { ref } from 'vue'
const msg = ref('你好，Vue 3')
const count = ref(0)
function add() { count.value++ }
</script>

<template>
  <h1>{{ msg }}</h1>
  <p>当前计数：{{ count }}</p>
  <button @click="add">+1</button>
</template>

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

保存后页面自动热更新。

步骤 4：理解三段式结构

• <script setup>：写逻辑，声明响应式数据和方法
• <template>：写 HTML 模板，用 {{ }} 插值、@click 绑定事件
• <style scoped>：写样式，scoped 表示只作用于当前组件

步骤 5：main.js 做了什么

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

createApp 创建应用实例，mount('#app') 把它挂到 index.html 的 <div id="app"></div> 上。