写一个网页不难，难的是几十个页面、上百个组件、几个人同时改还能不乱。这一章先把「地基」打好：弄懂 Node.js、npm、Vite 各自管什么，然后用一条命令创建出本课程的前端项目 hivue，看懂它的目录结构，认识 单文件组件（SFC） 和 组合式 API，最后改一个组件、亲眼看到 热更新（HMR） 秒级生效。学完这一章，你就有了一个能跑起来的前端工地。
# 装完一定要「重新打开」终端，否则 PATH 还没生效
node -v
npm -v本课程统一用 pnpm 装依赖。它是 npm 的替代品，命令几乎一一对应，但装得更快、更省磁盘（同样的包在所有项目间共享一份，而不是每个项目都拷一份）。Node 16.13 以后自带 corepack，一条命令就能启用。
# 启用 Node 自带的 corepack，再用它激活 pnpm 9
corepack enable
corepack prepare pnpm@9 --activate
pnpm -vpnpm devnpm create vue@latest hivuecd hivue
pnpm install
pnpm dev<script setup>
// 组合式 API：这里定义的变量和函数，模板里可以直接用
import { ref } from 'vue'
const title = ref('静夜思')
const author = ref('李白')
const views = ref(328)
</script>
<template>
<div class="card">
<h3 class="title">{{ title }}</h3>
<p>作者：{{ author }} 浏览量：{{ views }}</p>
</div>
</template>
<style scoped>
.card {
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.title {
margin: 0 0 6px;
color: #8b5a2b;
}
</style><script>
export default {
data() {
return { likes: 0 }
},
computed: {
text() {
return '点赞 ' + this.likes
}
},
methods: {
addLike() {
this.likes++
}
}
}
</script><script setup>
import { ref, computed } from 'vue'
// ---- 点赞功能：相关的东西全放在一起 ----
const likes = ref(0)
const text = computed(() => '点赞 ' + likes.value)
function addLike() {
likes.value++
}
</script>
<template>
<button @click="addLike">{{ text }}</button>
</template>ls -1
ls -1 srcimport { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia()) // 装上状态仓库
app.use(router) // 装上路由
app.mount('#app') // 挂载到 index.html 里的 <div id="app"><script setup>
import HelloCard from './components/HelloCard.vue'
</script>
<template>
<main>
<h1>古典文学网</h1>
<HelloCard />
</main>
</template>pnpm dev前端框架也不是「越新越好」。Vue、React、Angular、Svelte 各有侧重，选哪个往往取决于团队习惯和项目规模。下面按常用维度对比，重点看「什么时候该用谁」。
| 维度 | Vue 3（本课） | React | Angular | Svelte |
|---|---|---|---|---|
| 设计理念 | 渐进式：模板 + 组合式 API | 函数式：一切皆组件与 Hook | 一体化平台，强约定 | 编译时框架，无虚拟 DOM |
| 学习曲线 | 平缓：模板写法接近 HTML | 中等：JSX 与 Hook 规则要适应 | 陡：概念与 CLI 多 | 平缓：写法最接近原生 |
| 模板写法 | 单文件组件 .vue（template / script / style） | JSX（在 JS 里写标签） | HTML 模板 + TypeScript | 类 HTML 的 .svelte 文件 |
| 响应式原理 | 基于 Proxy 的细粒度追踪 | 手动 setState / 不可变更新 | Zone.js 脏检查 | 编译期收集依赖 |
| 生态（路由 / 状态） | Vue Router / Pinia，官方维护 | React Router / Redux，社区多 | Router / NgRx，官方全套 | 轻量，官方库较少 |
| 性能 | 好（编译优化 + 细粒度） | 好（虚拟 DOM 成熟） | 稳，但包体偏大 | 极佳（无运行时开销） |
| 典型适用场景 | 教学、中后台、渐进改造旧站 | 大型 SPA、跨端（React Native） | 企业级大项目 | 轻量应用、极致体积 |
横向看每一列：React 灵活但要自己定规矩，Angular 强但重，Svelte 快但生态新——Vue 在「好上手」和「能长大」之间找了平衡点。
<script setup>
import { ref } from 'vue'
const name = ref('流浪地球')
const year = ref(2019)
</script>
<template>
<p class="movie">{{ name }}（{{ year }}）</p>
</template>
<style scoped>
.movie {
font-size: 14px;
color: #555;
}
</style>第 1 题的关键：Node 是运行环境，npm/pnpm 是包管理器（读 package.json 下依赖），Vite 是构建工具（pnpm dev 真正启动的就是它），Vue 是我们写的框架。第 3 题的判断依据只有一条：这个组件能不能被地址栏直接打开——电影卡片不能，放 components/；电影详情页要对应 /movie/1 这样的地址，放 views/。
做完点「检查本节」看解析与得分；做错可重做。