今天正式写Vue。目标是早报站首页的第一个真实组件文章卡片——标题、摘要、链接、点赞按钮全站复用。本篇学会四件事单文件组件SFC怎么写、ref响应式怎么用、props怎么传参、v-for怎么渲染列表。含组件代码约60行。 太长不看版给想快速上手的你项目信息一句话说明本篇目标写出早报站第一个Vue组件ArticleCard代码行数~60行含注释依赖无新增脚手架已就位核心功能组件 props传参 ref响应式 v-for列表跑起来的命令npm run dev→http://localhost:5173核心知识点SFC、ref、defineProps、computed、v-for做完你能得到一个可复用、可交互、有隔离样式的文章卡片组件一、概念复习三句话把Vue装进脑子在写代码前把前端世界观翻译成Vue的三个具体机制#机制说明①组件 自包含的积木一个.vue文件 HTML长得怎样 JS怎么反应 CSS怎么打扮住一个房间——拆组件就是在做你之前做过的事函数拆分只不过拆的是 “界面函数”②模板 视图的声明{{ title }}就是 “这里显示title”v-for就是 “这个列表重复渲染多少次”——你声明Vue执行③ref 会通知视图的变量普通let count 0改了视图不知道ref(0)包装后count.value一变用到它的视图自动更新——这就是 “数据是账本视图是投影”的落地二、第0步清理脚手架在上篇的daily-front项目里# 删掉默认的HelloWorld组件rmsrc/components/HelloWorld.vue# 清空App.vue从零开始写早报站的壳——脚手架给的默认内容都是演示真正写项目时第一步永远是清空它们。三、第1步第一个组件ArticleCardsrc/components/ArticleCard.vuescript setup import { computed, ref } from vue // ① props父组件传入的参数≈ 函数的参数只读 const props defineProps({ title: String, summary: String, url: String, }) // ② ref响应式状态——liked / likeCount 一变视图自动更新 const liked ref(false) const likeCount ref(0) // ③ 事件处理模板里的 click 会调用它 function toggleLike() { liked.value !liked.value likeCount.value liked.value ? 1 : -1 } // ④ computed由已有数据 “派生”的新值依赖变化自动重算 const preview computed(() (props.summary || ).slice(0, 40) …) /script template article classcard h2a :hrefurl target_blank{{ title }}/a/h2 p{{ preview }}/p button clicktoggleLike {{ liked ? ❤️ 已赞 : 点赞 }} · {{ likeCount }} /button /article /template style scoped .card { border: 1px solid #d8dee4; border-radius: 8px; padding: 14px 18px; margin: 12px 0; } .card h2 { margin: 0 0 6px; font-size: 17px; } button { cursor: pointer; border: 1px solid #1d6f9e; background: none; color: #1d6f9e; padding: 4px 12px; border-radius: 999px; } /style 逐段拆解这个60行的文件——它同时演示了Vue的全部基础#概念说明①script setup组合式API的语法糖——这里写的变量和函数模板里直接用setup “准备”不用再写一坨return②defineProps声明这个组件接收哪些参数。title: String意思是 “调用方必须按字符串传title”。props ≈ 函数参数而且是只读的——组件不能改自己的参数③ref(false)把布尔值包装成 “响应式变量”。JS里读写要.value模板里不用——Vue自动解包④computed基于props派生的摘要预览——数据变了它自动重算不用手动维护⑤click事件绑定v-on的简写按钮点了调用toggleLike⑥style scopedscoped意味着这套样式只作用于本组件——组件的自我隔离外面同名类名不影响你四、第2步在App.vue里使用组件src/App.vuescript setup import ArticleCard from ./components/ArticleCard.vue // 模拟数据第13篇联调时换成从API拉 const articles [ { id: 1, title: 重构教会我的事, summary: 把歪代码拆开重装功能不变结构变好……, url: # }, { id: 2, title: 第一个爬虫抓到了什么, summary: 250部电影入库之后我看到了榜单背后的规律……, url: # }, { id: 3, title: 给项目装上AI, summary: 一次HTTP调用 一段好Prompt……, url: # }, ] /script template h1Python 早报/h1 p classsubtitle每天5分钟掌握Python社区动态/p !-- v-for列表渲染:key是每个条目的身份证 -- ArticleCard v-fora in articles :keya.id :titlea.title :summarya.summary :urla.url / /template 三个语法点#语法点说明①v-fora in articles循环渲染——articles有几条就生成几个ArticleCard②:keya.id每个列表项的身份证Vue用它追踪 “谁是谁”——永远用稳定的id别用下标index第六节③③:title是v-bind:title的简写把变量值绑给prop。:titlea.title与titlea.title完全不同——后者传的是字符串字面量a.title✅ 验收时刻浏览器打开localhost:5173三张卡片渲染点点赞按钮数字1❤️/切换——没有整页刷新没有任何后端请求这就是声明式渲染。五、验收清单1. 三张文章卡片渲染成功样式隔离生效scoped无污染2. 点击点赞 → 数字1、图标切换无页面刷新3. 连点两次 → 数字回到原值toggle逻辑正确4. 在articles里加第4条 → 保存即出现第四张卡热重载 v-for生效5. 故意把title拼错 → 浏览器控制台出现清晰警告练读报错6. 全程无报错后提交Gitgitadd.gitcommit-mVue3起步ArticleCard组件 响应式点赞六、常见报错这6个Vue新手的标配重点① 页面空白什么都没有 原因八成是组件没挂上——App.vue忘了import或template里没写ArticleCard /。✅ 解法三步自查——import了吗模板里用了吗组件文件路径对吗组件不会自己出现在页面上。②[Vue warn]: Property articles was accessed during render but is not defined 原因模板里用了articles但script setup里没定义或拼写不一致。✅ 解法模板引用的每个名字都必须在script setup里存在。模板与脚本是同一份变量的两面。③ v-for控制台警告缺key 原因列表渲染没写:key或用了index当下标。✅ 解法用数据的稳定id。index当key在 “列表中间插入/删除”时会张冠李戴——后端读者可以理解为 “索引变化导致对错行”。④Cannot read properties of undefined (reading value)或点击无反应 原因JS里忘了.value——liked !liked改的是包装对象本身不是里面的值。✅ 解法script里凡是ref变量读写一律.value模板里不需要。记住这条分界线JS里.value模板里光着。⑤ 样式写了一大堆页面纹丝不动 原因style scoped只作用于当前组件——你写在了A组件但类名用在B组件。✅ 解法全局样式字体、背景放App.vue的非scoped style块组件样式各管各家。⑥ 改完代码页面上的点赞数归零了 原因不是bug——热重载/刷新后内存状态自然重置ref是内存变量不是数据库。✅ 解法现阶段接受 “刷新即失忆”登录态和数据的持久化之后的Pinia localStorage和联调API处理。七、课后练习#练习难度提示1标签属性给ArticleCard加一个tagprop如AI/“爬虫”卡片左上角渲染一个小标签⭐复习props全流程2卡片跳转把整张卡片包进链接点击卡片跳原文⭐⭐卡片h2的a已就位扩展到整卡3空摘要兜底summary为空时显示 “暂无摘要”⭐⭐v-if / 或computed返回兜底文案——两种思路都试4选做拆SiteHeader把标题副标题拆成独立组件在App里用一次⭐⭐体会 “组件即函数”的复用感 配套代码完整组件已上传Gitpython_daily/node_modules不入仓【gitee仓库地址】