项目创建与 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。