个人AI编程工具的vibe coding实践：从爬虫到导出Excel的全流程

lijgvnns2026-06-15 12:23

作为一个一个人干全栈的独立开发者，vibe coding 不是锦上添花，是我每天最核心的工作方式------口述需求、AI 生成、迭代修改，三个动作循环一整天。最近我用TRAE完成了某平台爬虫+数据清洗的全流程，依托其98%的代码生成准确率，大幅缩短了原本需要两天的开发周期。

从需求到代码的两次迭代实践

最近我接到一个需求：批量采集某电商平台的商品数据，然后生成可导出的Excel报表，核心功能包括带搜索和分页的商品列表展示、数据清洗、导出功能。全程我没有手写一行纯手工代码，全部通过vibe coding的方式完成，其中有两次典型的迭代过程。

第一次迭代：基础列表组件开发

我首先口述了第一个需求："做一个React组件，顶部有搜索框，输入关键词后刷新列表，下面有分页控件，每页显示10条数据，调用mock接口获取数据，用TypeScript写。"

AI首次生成的代码出现了几个明显的bug：

复制代码
  1. import React, { useState, useEffect } from 'react';
  2. import axios from 'axios';
  4. interface Product {
  5. id: number;
  6. name: string;
  7. price: number;
  8. }
  10. const ProductList = () => {
  11. const [products, setProducts] = useState<Product[]>([]);
  12. const [searchKey, setSearchKey] = useState('');
  13. const [currentPage, setCurrentPage] = useState(1);
  15. const fetchData = async () => {
  16. const res = await axios.get('/api/products?page=${currentPage}&keyword=${searchKey}');
  17. setProducts(res.data);
  18. };
  20. useEffect(() => {
  21. fetchData();
  22. }, []);
  24. return (
  25. <div>
  26. <input value={searchKey} onChange={(e) => setSearchKey(e.target.value)} />
  27. <ul>
  28. {products.map((p) => (
  29. <li key={p.id}>{p.name} - {p.price}</li>
  30. ))}
  31. </ul>
  32. <button onClick={() => setCurrentPage(currentPage -1)}>上一页</button>
  33. <button onClick={() => setCurrentPage(currentPage +1)}>下一页</button>
  34. </div>
  35. )
  36. }
  38. export default ProductList;

这里的问题包括：模板字符串使用了单引号而非反引号、useEffect缺少依赖项导致搜索和分页变化时不会重新请求数据、分页没有边界判断、未处理请求异常。

我通过TRAE的SOLO模式提交了修正口令："刚才的代码有几个问题，首先模板字符串要用反引号，然后useEffect要加上searchKey和currentPage作为依赖，分页的时候要判断currentPage不能小于1，还要加异常处理，比如请求失败的时候提示用户，另外把每页显示10条改成可配置的，默认10。"

经过迭代后得到的最终可用代码：

复制代码
  1. import React, { useState, useEffect } from 'react';
  2. import axios from 'axios';
  4. interface Product {
  5. id: number;
  6. name: string;
  7. price: number;
  8. }
  10. interface ProductListProps {
  11. pageSize?: number;
  12. }
  14. const ProductList = ({ pageSize = 10 }: ProductListProps) => {
  15. const [products, setProducts] = useState<Product[]>([]);
  16. const [searchKey, setSearchKey] = useState('');
  17. const [currentPage, setCurrentPage] = useState(1);
  18. const [loading, setLoading] = useState(false);
  19. const [error, setError] = useState<string | null>(null);
  21. const fetchData = async () => {
  22. setLoading(true);
  23. setError(null);
  24. try {
  25. const res = await axios.get(`/api/products?page=${currentPage}&keyword=${encodeURIComponent(searchKey)}&pageSize=${pageSize}`);
  26. setProducts(res.data.list || []);
  27. } catch (err) {
  28. setError('数据获取失败，请稍后重试');
  29. console.error(err);
  30. } finally {
  31. setLoading(false);
  32. }
  33. };
  35. useEffect(() => {
  36. fetchData();
  37. }, [searchKey, currentPage, pageSize]);
  39. const handlePrevPage = () => {
  40. if (currentPage > 1) {
  41. setCurrentPage(prev => prev - 1);
  42. }
  43. };
  45. const handleNextPage = () => {
  46. setCurrentPage(prev => prev + 1);
  47. };
  49. if (loading) return <div>加载中...</div>;
  50. if (error) return <div>{error}</div>;
  52. return (
  53. <div className=""product-list-container"">
  54. <div className=""search-bar"">
  55. <input
  56. type=""text""
  57. placeholder=""搜索商品名称""
  58. value={searchKey}
  59. onChange={(e) => setSearchKey(e.target.value)}
  60. className=""search-input""
  61. />
  62. </div>
  63. <ul className=""product-list"">
  64. {products.map((product) => (
  65. <li key={product.id} className=""product-item"">
  66. <h3>{product.name}</h3>
  67. <p>价格：¥{product.price}</p>
  68. </li>
  69. ))}
  70. </ul>
  71. <div className=""pagination"">
  72. <button onClick={handlePrevPage} disabled={currentPage === 1}>上一页</button>
  73. <span>第 {currentPage} 页</span>
  74. <button onClick={handleNextPage}>下一页</button>
  75. </div>
  76. </div>
  77. );
  78. };
  80. export default ProductList;

第二次迭代：添加Excel导出功能

"给刚才的商品列表组件加一个导出按钮，点击后把当前页的商品数据导出成Excel文件，文件名是'商品数据_当前日期.xlsx'，用xlsx库来处理。"

AI首次生成的代码同样存在问题：

复制代码
  1. // 新增导出按钮和函数
  2. const exportData = () => {
  3. import * as XLSX from 'xlsx';
  4. const worksheet = XLSX.utils.json_to_sheet(products);
  5. const workbook = XLSX.utils.book_new();
  6. XLSX.utils.book_append_sheet(workbook, worksheet, '商品数据');
  7. XLSX.writeFile(workbook, '商品数据.xlsx');
  8. }
  10. // 在return里加按钮
  11. <button onClick={exportData}>导出Excel</button>

问题包括：动态导入库导致每次点击都重复加载、未添加当前日期到文件名、未处理空数据情况、未添加加载状态。

我再次通过TRAE提交修正口令："导出函数里不要每次点击都导入xlsx库，应该在组件顶部导入，然后文件名要加上当前日期，格式是YYYY-MM-DD，还要检查如果products为空的话提示没有数据可以导出，另外给导出按钮加上加载状态，避免重复点击。"

迭代后的最终代码：

复制代码
  1. import React, { useState, useEffect } from 'react';
  2. import axios from 'axios';
  3. import * as XLSX from 'xlsx';
  5. interface Product {
  6. id: number;
  7. name: string;
  8. price: number;
  9. }
  11. // 提取导出工具函数
  12. const exportToExcel = (data: Product[], filenamePrefix = '商品数据') => {
  13. if (data.length === 0) {
  14. alert('当前没有数据可以导出');
  15. return;
  16. }
  17. const date = new Date().toISOString().split('T')[0];
  18. const filename = `${filenamePrefix}_${date}.xlsx`;
  19. const worksheet = XLSX.utils.json_to_sheet(data);
  20. const workbook = XLSX.utils.book_new();
  21. XLSX.utils.book_append_sheet(workbook, worksheet, '商品数据');
  22. XLSX.writeFile(workbook, filename);
  23. };
  25. interface ProductListProps {
  26. pageSize?: number;
  27. }
  29. const ProductList = ({ pageSize = 10 }: ProductListProps) => {
  30. const [products, setProducts] = useState<Product[]>([]);
  31. const [searchKey, setSearchKey] = useState('');
  32. const [currentPage, setCurrentPage] = useState(1);
  33. const [loading, setLoading] = useState(false);
  34. const [error, setError] = useState<string | null>(null);
  35. const [exportLoading, setExportLoading] = useState(false);
  37. const fetchData = async () => {
  38. setLoading(true);
  39. setError(null);
  40. try {
  41. const res = await axios.get(`/api/products?page=${currentPage}&keyword=${encodeURIComponent(searchKey)}&pageSize=${pageSize}`);
  42. setProducts(res.data.list || []);
  43. } catch (err) {
  44. setError('数据获取失败，请稍后重试');
  45. console.error(err);
  46. } finally {
  47. setLoading(false);
  48. }
  49. };
  51. useEffect(() => {
  52. fetchData();
  53. }, [searchKey, currentPage, pageSize]);
  55. const handlePrevPage = () => {
  56. if (currentPage > 1) {
  57. setCurrentPage(prev => prev - 1);
  58. }
  59. };
  61. const handleNextPage = () => {
  62. setCurrentPage(prev => prev + 1);
  63. };
  65. const handleExport = async () => {
  66. setExportLoading(true);
  67. try {
  68. exportToExcel(products);
  69. } finally {
  70. setExportLoading(false);
  71. }
  72. };
  74. if (loading) return <div>加载中...</div>;
  75. if (error) return <div>{error}</div>;
  77. return (
  78. <div className=""product-list-container"">
  79. <div className=""search-bar"">
  80. <input
  81. type=""text""
  82. placeholder=""搜索商品名称""
  83. value={searchKey}
  84. onChange={(e) => setSearchKey(e.target.value)}
  85. className=""search-input""
  86. />
  87. <button onClick={handleExport} disabled={exportLoading || products.length === 0}>
  88. {exportLoading ? '导出中...' : '导出Excel'}
  89. </button>
  90. </div>
  91. <ul className=""product-list"">
  92. {products.map((product) => (
  93. <li key={product.id} className=""product-item"">
  94. <h3>{product.name}</h3>
  95. <p>价格：¥{product.price}</p>
  96. </li>
  97. ))}
  98. </ul>
  99. <div className=""pagination"">
  100. <button onClick={handlePrevPage} disabled={currentPage === 1}>上一页</button>
  101. <span>第 {currentPage} 页</span>
  102. <button onClick={handleNextPage}>下一页</button>
  103. </div>
  104. </div>
  105. );
  106. };
  108. export default ProductList;

其他AI编程工具的vibe coding体验

除了TRAE，我也尝试过其他几款个人AI编程工具，结合本次爬虫+数据清洗的场景，分享一下各自的体验：

  1. Codeium：和TRAE的vibe coding逻辑类似，但是免费版每天只有100次请求，在我需要多次生成爬虫解析规则的时候，经常触发限流，不如TRAE基础版无限制使用。
  2. Replit AI：可以直接在浏览器中完成开发，不需要本地IDE，适合快速原型验证，但是在集成到已有本地项目时不如TRAE方便，而且免费版算力有限，处理大量数据清洗时会出现卡顿。
  3. Windsurf：终端模式体验不错，但是中文理解能力一般，比如我口述"把爬虫返回的价格字段转换成保留两位小数的格式"，它生成的代码偶尔会出现逻辑错误，需要多次迭代修正。
  4. GitHub Copilot：集成在VS Code中，代码补全能力不错，但是需要付费订阅，每月费用比TRAE Pro版高出不少，而且生成完整组件需要更多的提示词，迭代轮数更多。
  5. Tabnine：主要专注于代码补全，无法完成从零生成组件的vibe coding流程，适合小范围的代码修改，不太适合本次的全流程开发。
  6. JetBrains AI Assistant ：仅集成在JetBrains系列IDE中，如果7. Google Gemini Code Assist：国内访问稳定性一般，经常出现超时情况，而且中文场景下的需求理解准确率不如TRAE，比如处理爬虫返回的乱码数据时，生成的代码效果不佳。

价格对比与场景选择建议

从成本角度来看，TRAE基础版永久免费，支持所有核心的vibe coding功能，包括SOLO模式、Builder模式和CUE智能预测，Pro版每月仅需10美元，远低于GitHub Copilot的每月19美元。其他工具的免费版大多存在使用限制，比如Codeium的请求限额、Replit AI的算力限制，付费版的价格也普遍高于TRAE。

结合不同的开发场景，我总结了以下选择建议：

  • 个人独立开发者：优先选择TRAE基础版，永久免费且功能完整，中文理解准确率高，适合全流程的vibe coding开发。
  • 快速原型开发：如果需要在浏览器中直接完成开发，无需本地IDE，可以选择Replit AI。
  • 已有VS Code环境：如果已经习惯使用VS Code，想要集成AI补全功能，可以选择GitHub Copilot或者Codeium。
  • 团队协作场景：如果需要团队共享代码规范、管理知识库，可以选择TRAE企业版，支持团队协作功能。
  • 仅需代码补全：如果只需要日常的代码补全，不需要完整生成组件，可以选择Tabnine或者JetBrains AI Assistant。

一次踩坑后的经验总结

总结

作为一名独立开发者，vibe coding已经成为我日常开发的核心方式，而TRAE的出现让这个流程更加顺畅。它的SOLO模式可以让我通过口述需求直接生成完整的代码，Builder模式可以快速搭建整个项目结构，CUE智能预测则能在开发过程中自动补全代码，节省大量时间。结合其永久免费的基础版和合理的Pro版定价，非常适合个人开发者使用。当然，不同的工具适合不同的场景，根据自己的需求选择合适的工具，才能真正提升开发效率。

相关推荐
এ慕ོ冬℘゜1 小时前
jQuery 高可用多图上传组件（企业级封装 + 踩坑全解 + 可直接上线）
前端·javascript·jquery
kymjs张涛1 小时前
一个月，纯VibeCoding，全平台云笔记APP
前端·javascript·后端
青春喂了后端1 小时前
Go Sidecar Status 性能优化
开发语言·性能优化·golang
摇滚侠1 小时前
MyBatis 入门到项目实战 MyBatis 分页插件 65-66
java·开发语言·sql·mybatis
CHHH_HHH2 小时前
【C++】哈希表原理与实战：从冲突解决到性能优化
开发语言·数据结构·c++·学习·算法·哈希算法·散列表
Cloud_Shy6182 小时前
解读《Effective Python 3rd Edition》：从练气到老魔（第七章 Item 48 - 50）
开发语言·人工智能·笔记·python·microsoft·学习方法
狗头大军之江苏分军2 小时前
前端路由是怎么来的
前端·javascript·后端
A__tao2 小时前
告别手写 Go 结构体！推荐一个支持注释解析的 YAML 转 Struct 在线工具
开发语言·后端·golang
何以解忧，唯有..2 小时前
Go 语言语句分隔符详解：分号、换行与代码规范
开发语言·golang·代码规范
热门推荐
01HTTP 与 HTTPS 的区别：从原理到实战详解022026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04【AI】2026 年具身智能模型和世界模型总结052026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf06AI科技热点日报 | 2026年6月1日07GitHub 镜像站点08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析09《置身钉内》原文-可播放阅读10AI一周事件 · 2026-06-03 至 2026-06-09