一个语法点，三个地方见：官方指南怎么定义它（cn.vuejs.org）、课程第几章讲它、以及它在「古典文学网」真实代码里的哪一处。学的时候对照着看，讲的时候照着念——理论、课堂、工程，三线合一。
| 官方指南节点 | 课程 | 项目位置（hivue） | 一句话讲法 |
|---|---|---|---|
| 快速上手 | 第 1 章 | package.json · index.html | 一行 npm create，官府发你一套工地。 |
| 创建一个应用 | 第 1 章 | src/main.js（createApp → use → mount） | 三步挂号：立案、备案、开门。 |
| 模板语法 | 第 2 章 | views/ArticleList.vue 工具栏 | 花括号贴字，冒号绑性。 |
| 响应式基础 | 第 2 / 5 章 | views/Home.vue 的 ref([]) 三件套 | ref 是账本，不是变量。 |
| 计算属性 | 第 3 章 | components/ArticleCard.vue 七个 computed | 算出来的不进账本，问一次记一笔。 |
| 类与样式绑定 | 第 2 章 | ArticleDetail.vue 点赞按钮的 :type、顶栏下拉 | class 跟着状态走，样式不用手改。 |
| 条件渲染 | 第 4 章 | ArticleDetail.vue 正文 / 空态两套 | v-if 拆房，v-show 掩帘。 |
| 列表渲染 | 第 4 章 | ArticleList.vue 的 v-for + :key | key 是户籍，下标不是。 |
| 事件处理 | 第 2 章 | Home.vue 的 @keyup.enter、@click | 艾特接事，修饰符替你省手。 |
| 表单输入绑定 | 第 2 章 | Login.vue 登录 / 注册两套表单 | v-model 让数据当老大。 |
| 生命周期钩子 | 第 5 章 | Home.vue 的 onMounted + Promise.all | 上梁再摆人。 |
| 侦听器 | 第 3 章 | ArticleList.vue 筛选变化 → 回第一页 | 要办一件事，找更夫。 |
| 模板引用 | 第 5 章 | Login.vue 的 ref="loginRef" → validate() | ref 是伸进组件里的那只手。 |
| 官方指南节点 | 课程 | 项目位置（hivue） | 一句话讲法 |
|---|---|---|---|
| 组件基础 | 第 6 章 | Home.vue 里 <ArticleCard v-for … /> | 一个组件一块榫卯。 |
| Props | 第 6 章 | ArticleCard.vue 的 defineProps({ article }) | props 下行交底，只读不改。 |
| 组件事件 | 第 6 章 | 项目用 @change / @success 接 Element 事件（练习：给卡片加 emit） | emit 上行回话。 |
| 组件 v-model | 第 6 章 | ArticleList.vue 的 v-model:current-page / v-model:page-size | 组件也能双绑，官方的糖照样吃。 |
| 透传 Attributes | 第 6 章 | ArticleCard 根节点上的 @click、shadow | 没声明的属性，自动落到根上。 |
| 插槽 | 第 6 章 | Home.vue 搜索框的 <template #append> | slot 留活口，结构不写死。 |
| 依赖注入 | 第 6 章（选学） | 本项目未用 —— 三层以内用 props，再深才考虑 inject | props 传八层是灾难，inject 是深树的电梯。 |
| 异步组件 | 第 7 章 | router/index.js 的 () => import(...) | 不进这一景，不搬这一景的料。 |
| 官方指南节点 | 课程 | 项目位置（hivue） | 一句话讲法 |
|---|---|---|---|
| 组合式函数 | 第 5 章 | Home.vue 的加载逻辑（练习：抽成 useHomeData()） | 逻辑写三遍，就该请掌班师傅。 |
| 自定义指令 | 第 5 章（选学） | 本项目未用 —— 需要「直接摸 DOM」时才写 | v- 开头的都是命令，自己也能下一道。 |
| 插件 | 第 1 章 | main.js 的 app.use(ElementPlus) | 挂一次，全园通用。 |
| 路由 | 第 7 章 | router/index.js 全文（嵌套 / 动态 / 守卫 / 懒加载 / 兜底） | 一张路由表，千般动线。 |
| 状态管理 | 第 8 章 | stores/user.js（Pinia + localStorage 持久化） | 一本账，全园读。 |
| 服务端渲染（SSR） | 第 12 章（延伸） | 本项目是纯 SPA —— 首屏与 SEO 的取舍，讲清为什么 | 现造的园子，先开门再长草。 |
| 生产部署 | 第 12 章 | .env.production、vite.config.js、Nginx（try_files + /api 反代） | 合并压缩加指纹，验货再出门。 |
| 性能 | 第 12 章 | 路由懒加载、Element Plus 按需引入（第 10 章已讲） | 按需搬料，首屏才轻。 |
| 安全 | 第 9 章 | request.js 统一处理 401；正文用插值不用 v-html | 别把用户的话当代码执行。 |
api → ref → 模板。api/article.js 发请求，页面把它存进 ref，模板自动渲染。全项目没有一行 document.querySelector——只有「改数据」这一个动作。
存 → 带 → 拦。stores/user.js 存 token；request.js 请求拦截器自动加 Authorization；router/index.js 守卫拦未登录页面；过期由响应拦截器统一踢回登录页。
页面不写 URL，只调 api/*.js 里的函数。后端换地址、改路径，只动 api 层一个文件——这是「工程」与「作业」的分水岭。
cd pyweb/code/hiflask && python app.py（MySQL 已导入 hiwen.sql）npm install（Node ≥ 18）npm run dev → 打开 http://localhost:5173