当前位置：首页 > news >正文

KnowCard：我的知识卡片生成器是怎么炼成的？

news 来源：原创 2025/7/27 23:52:01

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

起心动念：我想做个“笔记神器”

有时候，看着笔记本里密密麻麻的学习要点，我总会想，如果能把它们变成一张张好看又结构清晰的卡片，不就更方便背诵和复习了吗？于是，“KnowCard”这个名字浮现在脑海里——一个可以创建、收藏、搜索、导出，还能切换主题的卡片式笔记工具，就这样诞生了。想法有了，接下来当然是找我的老搭档——CodeBuddy 上场。

从零开始：CodeBuddy 主动出击，项目雏形建立

我只是简单告诉 CodeBuddy：“我想用 Vue3 和 localStorage 做个卡片工具，支持创建、折叠、搜索、导出，还想加点主题和学习模式。”结果没想到它比我还积极。它马上帮我评估任务复杂度，并细化成几个关键模块：卡片组件、搜索组件、主题管理、导出工具等等。

更厉害的是，它直接帮我用 Vite 创建了 Vue3 项目。甚至项目命名（knowcard）、框架选择（Vue）、语言选项（JavaScript），全程都由 CodeBuddy 主动操作。

安装依赖：一步到位，CodeBuddy 全包了

CodeBuddy 没有让我去查什么包该装什么不该装，它直接就配好了：

html2canvas：导出卡片为图片；
marked：支持 Markdown 渲染；
@vueuse/core：组合式 API 大礼包；
sass：用于更优雅的样式编写。

我只需看着终端滚动安装进度就好，感觉像在看一个“自动建站”的魔法场景。

项目结构搭建：从目录到组件，层层推进

项目结构方面，CodeBuddy 构建得非常合理。它帮我创建了 src/components 放 UI 组件，src/styles 放样式资源，并修改 App.vue 成为主页面，提前留好卡片展示和创建区域。

它甚至贴心地提醒我 Windows 下要用 mkdir src\components 而不是 Linux 命令。真的，全程一个小坑都没踩。

在这里插入图片描述

组件开发：从卡片到功能区，组件思路清晰

接下来的开发中，我只说了几句功能描述，比如“我想要可以折叠的卡片、能按标签分类、能搜索卡片内容”，CodeBuddy 就立刻设计出合理的组件结构。

比如卡片组件 CardItem.vue，它的折叠功能用 v-show 搭配点击事件做了动态控制；收藏功能则是通过 localStorage 中的 isFavorite 属性同步状态，并添加了醒目的星号标识。整个逻辑层层分明，代码风格简洁易懂，还保留了注释，非常友好。

本地存储：数据持久性安排得明明白白

卡片的增删改查，全是本地存储完成的。CodeBuddy 使用 Vue 的 ref() 管理响应式数据，结合 localStorage 做了存储绑定，还自动封装了 saveToLocal() 和 loadFromLocal() 函数，这让我只管用而不用担心数据丢失问题。

更贴心的是，它还实现了“收藏优先显示”、“按标签过滤”、“模糊搜索”等功能，全部通过 computed 和 watch 实现，完全不拖沓。

导出功能：Markdown 和图片双轨输出

我还想要一键导出卡片，于是我补充了一句：“能导出为 Markdown 或图片就好了。”结果，CodeBuddy 马上引入了 html2canvas 和 marked，并为我封装成导出函数，还提供了专门的导出按钮。

点击导出图片时，页面元素被动态捕获，转为 PNG 下载；点击导出 Markdown 时，卡片内容被格式化为标准文本流，非常方便。整个过程几乎没让我动脑筋，全由 CodeBuddy 编排。

在这里插入图片描述

手账风主题：颜值与个性兼备

考虑到我希望整个工具“长得好看”，CodeBuddy 给出了牛皮纸质感的主题样式：使用手写体字体、带有纸张纹理的背景、卡片圆角和阴影效果，看上去就很像真实的便签。

而且，它还内置了主题切换按钮，不同的颜色风格能给不同用户不同体验。整个 UI 一边美观，一边不失功能性。

在这里插入图片描述

学习模式：抽认卡小惊喜

作为一个复习工具，我希望它还能像 Anki 一样，实现“抽认卡”形式。于是我又补了一句“能不能加个学习模式”。结果 CodeBuddy 直接用 flipCard() 实现了卡片的“正反面”切换模式。点击卡片正面显示问题，再点击就展示答案，这种小而美的交互给了我很多惊喜。

在这里插入图片描述

总结：CodeBuddy，前端开发的超级拍档

整整一套 KnowCard 工具开发下来，我几乎没写什么代码，CodeBuddy 就像一个贴心的前端拍档，主动承担了每一个模块的设计与实现：

项目初始化不拖泥带水；
功能实现紧贴需求逻辑；
组件拆分合理、易复用；
样式审美在线；
所有代码清晰、注释齐全、结构分明。

尤其是它能听懂我非常模糊的需求（比如“牛皮纸风格”、“抽认卡模式”），并主动设计出合理且优雅的实现方案，这种能力让我感觉像在和一位顶级前端程序员协作。

下一步，我计划把这个工具分享给朋友们使用，也考虑加入数据库支持的版本。总之，开发这款工具的整个过程不仅让我收获了一个实用的产品，也再一次感叹了 CodeBuddy 的强大与智能。下一个灵感浮现时，我一定还会第一时间呼叫它——因为有它，开发从未如此轻松高效！

在这里插入图片描述

起心动念：我想做个“笔记神器”

从零开始：CodeBuddy 主动出击，项目雏形建立

安装依赖：一步到位，CodeBuddy 全包了

项目结构搭建：从目录到组件，层层推进

组件开发：从卡片到功能区，组件思路清晰

本地存储：数据持久性安排得明明白白

导出功能：Markdown 和图片双轨输出

手账风主题：颜值与个性兼备

学习模式：抽认卡小惊喜

总结：CodeBuddy，前端开发的超级拍档

相关文章：