项目创建与 SFC

这一课你将能做到

1. 用 create-vue（或 Vite Vue 模板）初始化项目并 npm run dev 看到页面
2. 读懂 .vue 单文件组件的 script / template / style 三段
3. 对照 React：script setup ≈ 函数组件体，template ≈ JSX return

为什么要学

官方推荐工程化起点是 Vite + SFC。把逻辑、模板、样式收在一个 .vue 文件里，心智比「三个文件拼组件」更集中。
与 React 核心 里 create vite 流程几乎同构，只是模板选 Vue。

先建立图像

my-vue-app/
  src/App.vue          ← 根组件 SFC
  src/main.ts          ← createApp(App).mount('#app')
  index.html           ← 挂载点 #app
  vite.config.*        ← 开发服务器与构建

SFC 块	干什么	React 对照
<script setup>	状态与函数	函数组件体
<template>	声明 UI	return (…)
<style scoped>	局部样式	CSS Modules 一类

跟着做

步骤 1：创建项目

npm create vue@latest my-vue-app

交互建议：TypeScript 可选；先勾选 Router、Pinia 便于后面课直接用（也可之后再加）。然后：

cd my-vue-app
npm install
npm run dev

浏览器打开终端提示的本地 URL，应看到起步页。

最小替代：npm create vite@latest my-app -- --template vue。

步骤 2：打开 App.vue 改文案

把标题改成你的昵称或「CodeRoadMap · Vue 练习」。保存后热更新应立刻变。
应看到：改模板 → 保存 → 浏览器变，无需手动刷 DOM。

步骤 3：写一个最小 script setup

<script setup>
import { ref } from "vue";
const title = ref("CodeRoadMap");
</script>

<template>
  <h1>{{ title }}</h1>
  <p>本站 platform 用 Next.js；本课练 Vue。</p>
</template>

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

{{ title }} 会自动解包 ref 显示字符串。在 script 里读写则用 title.value。

步骤 4：读入口 main

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

createApp(App).mount("#app");

人话：造一个应用实例，把根组件挂到 HTML 的 #app。

步骤 5：新建 HelloTrack.vue 并引入

<!-- src/components/HelloTrack.vue -->
<script setup>
defineProps({ name: { type: String, required: true } });
</script>
<template>
  <p>正在学：{{ name }}</p>
</template>

在 App.vue：

<script setup>
import HelloTrack from "./components/HelloTrack.vue";
</script>
<template>
  <HelloTrack name="Vue 3 核心" />
</template>

应看到子组件渲染。Props 下一课系统讲——此处先打通「引入组件」。

步骤 6：对照 React 工程

若你已有 Vite React 练习项目：并排看 main 入口与根组件文件。
记下：都是「组件树挂到一个 DOM 节点」；文件后缀与模板语法不同。

讲清楚要点

1. SFC 是默认生产力：官方示例、UI 库文档几乎都给 .vue。
2. scoped 防泄漏：样式默认只作用于当前组件模板。
3. script setup 顶层绑定自动暴露给模板：少写 return { … }。
4. 热更新保留状态不总是保证：大改模块可能重置，属正常。
5. 路径别名 @：create-vue 常配好；找不到模块先看 vite.config。
6. 本站不要求把 platform 改成 Vue：练习项目独立目录即可。

你可能会懵的地方

• 为什么模板里不用 .value？
  模板自动解包 ref；script 里要 .value。这是初学高频卡点。

• CSS 预处理器？
  可加 lang="scss"；入门用普通 CSS 足够。

• Options API 的 export default？
  旧写法。新课以 setup 为准，读遗留代码时再对照。

• Node 版本不够？
  看 Vite 文档要求；升级 Node 后再 npm create。

• 和 Nuxt？
  Nuxt 是更高层框架（类比 Next）。本 track 先打 Vue 核心。

错法对照

错法	问题	正解
改了文件浏览器不变	可能跑错目录/未保存	确认 dev 进程与路径
script 里写 title 当字符串赋	ref 被覆盖丢响应式	title.value = …
全局 CSS 污染	难查样式战	优先 scoped
组件忘记导入	控制台报错	import 后使用
把练习直接塞进 platform	栈混乱	独立 Vue 工程
跳过入口直接抄单文件	不懂挂载	先跑通 mount

自测三问

1. SFC 三个块各解决什么问题？
2. 模板中的 title 与 script 中的 title.value 何时用哪个？
3. createApp(App).mount('#app') 在干什么？

小结一句话

Vite + SFC + <script setup> 是 Vue 3 工程默认写法；先跑通挂载与热更新，再学模板细节。

动手加深

把本课「跟着做」再跑一遍，但这次故意先写出错法表里的一种写法，观察报错或错误现象 30 秒，再改回正解。
用自己的话补三条笔记：① 我最容易踩的坑；② 成功时屏幕/结果长什么样；③ 本课与上一课的衔接点。写不出来就重做步骤，不要只标完成。

官方延伸

• 单文件组件
• 快速上手
• 下一课：模板语法