朋友们上期咱们说到哪了哦对我那个待办清单应用。现在到了最刺激的环节——验收。你知道什么叫甲方验收吗就是我这种提需求提得天花乱坠结果自己都不知道要测什么的人。我打开应用在输入框里敲了一行字“学会用AI合法摸鱼”。点击添加按钮啪任务出现在列表里了。这一刻我的心情就像第一次用自动售货机——明明什么都没干饮料却出来了有种白嫖的快感。接着我点了下任务前面的复选框。神奇的事情发生了文字上多了一条删除线。这感觉就像小时候在作业本上划掉暑假作业四个字虽然作业还在但心理上我已经完成了。然后我点了删除按钮任务消失了。不是那种刷新后又回来了的假删除是真没了。我反复试了三次确认这不是幻觉。最后我点了预览窗口上方的设备图标看看在手机上的效果。好家伙在iPhone上看着还挺像那么回事总算不像某些网站在电脑上看着是故宫在手机上看着是毛坯房。这时候我突然发现添加按钮偶尔没反应。换作以前我得打开浏览器控制台对着一堆红色的报错信息发呆半小时然后默默打开搜索引擎“为什么我的按钮没反应在线等急”。但现在呢我直接把问题甩给AI我点击添加按钮后任务没出来。“AI回了句收到”两分钟后告诉我少了个事件监听修好了。我我就喝了口咖啡。这就是Vibe Coding的魅力——以前我是码农现在我是监工AI才是那个熬夜加班的实习生。一键上线从本地到全球的魔幻漂流应用做好了总不能让它烂在本地吧得部署上线让全世界都能访问。以前我听说部署上线脑子里浮现的是买服务器、配环境、改配置文件、凌晨三点对着终端流泪。现在呢Bolt.new右上角有个Publish按钮我点了一下又点了一下发布。然后我去上了个厕所回来一看聊天框里躺着个链接。就这么简单我反复确认了三遍这真的不是诈骗链接部署成功后我在手机浏览器里输入那个地址真的能打开。我赶紧把链接发到相亲相爱一家人群里我爸妈点开一看说儿子这网页做得挺整齐啊比你房间整齐多了。我说是AI做的我妈回“那AI挺懂事的比你懂事。”当然如果你觉得那个默认地址太长太丑Bolt.new还支持自定义域名但只有高级版能用。我看了看价格觉得还是丑点吧丑是丑可它免费啊。就像我这个人虽然长得一般但省心。手动部署技术人的硬核浪漫不过话说回来如果你想走专业路线手动部署这门手艺还是得学。我见过很多部署方案什么Vercel一键部署、Nginx配宝塔、WordPress搭博客、云端编辑器加对象存储加内网穿透……听着像不像武侠小说里的招式名还有更硬核的1Panel面板加Nginx加Java后端jar包宝塔加Nginx加Java项目管理器Docker加云托管ServerlessDocker Compose微服务……基本上学会这几招出去面试你说我懂部署HR看你的眼神都会多三分敬意虽然你可能还是不知道怎么修家里的WiFi。看懂你的作品别做只会点外卖的厨子做完项目我花了十分钟理解了一下我到底做了个啥。首先网页应用的基础是前端三件套HTML是骨架定义了页面有什么元素比如输入框、按钮、列表CSS是皮肤定义了颜色、字体、布局、动画JavaScript是灵魂定义了页面怎么工作比如添加任务、标记完成、删除、存数据。但AI在这个项目里用的是React一个现代化的前端框架。我看到项目文件里有.tsx后缀的文件这就是React组件文件。本质上它们最后还是会被转换成浏览器能理解的HTML、CSS和JavaScript。就像你吃到的佛跳墙看起来是一道菜实际上里面炖了十八种食材。看不懂没关系现在不懂完全不影响你使用。就像你不需要懂发动机原理也能开车不需要懂爱情原理也能谈恋爱虽然两者都可能让你在路上抛锚。核心功能是怎么跑起来的咱们看看几个关键功能是怎么实现的。添加任务你点击按钮程序先获取输入框里的文字然后创建一个新任务对象把它塞进列表同时保存到本地存储最后清空输入框并刷新页面。整个过程就像你在便利贴上写买牛奶然后贴到冰箱上——只不过这个冰箱永远不会满。标记完成你点击复选框程序找到对应的任务修改它的完成状态更新本地存储然后给文字加上删除线同时更新统计数字。就像你用记号笔在便利贴上划了一道表示这事我办了别催了。本地存储的真相你可能会好奇为什么刷新页面任务还在因为数据存在浏览器的localStorage里。每次你修改任务程序都会把最新数据保存进去重新打开页面时程序再从里面读出来。这就像你把便利贴写在了金刚不坏的石头上而不是写在沙滩上。以前我写的很多网页刷新一下数据全没我还以为是浏览器的问题现在才知道是我脑子的问题。如果你想知道某段代码到底在干什么直接问AI就行。比如请解释一下本地存储是怎么工作的或者这段代码是做什么的AI会用大白话给你讲明白比某些技术文档说人话多了。有些文档写的我怀疑作者根本不想让我看懂是在筛选有缘人。动手改造从能用变好用的进化论现在你已经有一个能用的小软件了可以尝试一些修改。比如让AI把应用改成粉色主题温柔可爱的感觉或者把所有文字改成英文版或者把统计信息移到页面底部并居中。也可以加新功能加个搜索框能搜索任务内容加个分类功能能给任务打标签加个导出按钮能把所有任务导出成文本文件。还可以优化用户体验按回车键快速添加任务、添加任务时来个淡入动画、删除时来个滑出动画、没有任务时显示个可爱的插图和鼓励文字。如果你觉得这些太简单还可以挑战截止日期、任务提醒、拖拽排序、深色模式切换、支持多个任务列表。每次想加功能就和AI说我想添加XXX应该怎么做“AI会帮你实现。你负责做梦AI负责搬砖这才是真正的分工明确”。写在最后10分钟改变认知恭喜如果你跟着做完了你已经完成了Vibe Coding的第一次实战。你刚才做的事在几年前需要几个月的学习才能完成。但在今天你只用了10分钟。10分钟连泡碗面都还没泡软你却做出了一个能上线运行的网页应用。通过这个项目你学会了如何清晰地向AI描述需求、通过多轮对话不断优化、遇到问题如何跟AI协作解决还学会了如何把项目发布到互联网。虽然你没写代码但你已经理解了网页应用的基本结构、用户交互的实现方式、数据存储的基本概念。更重要的是你建立了Vibe Coding的思维方式关注要做什么而不是怎么做先做出来再不断优化在做项目中学而不是先学再做把AI当作编程伙伴而不是工具。以前我们学编程是先学三年理论再动手现在是先动手三分钟再让AI教你理论。顺序反了效率却高了十倍。这只是开始。随着你做的项目越来越多你会发现你的需求表达能力越来越强、对技术的理解越来越深、能做的东西越来越复杂、创造力得到了真正的释放。记住在AI时代创造力比技术更重要想法比实现更重要迭代比完美更重要。你不需要成为全栈工程师你只需要成为一个有想法、会表达、敢动手的人。下一步去搞点新事情接下来建议你再做2到3个类似难度的项目巩固练习比如个人名片网页、倒计时应用、简单计算器、天气查询工具。实践是最好的老师只有真正动手做你才能真正理解Vibe Coding的魅力。就像谈恋爱看再多恋爱指南不如去相一次亲虽然两者都可能翻车。当你熟练了Bolt.new平台和简单项目的开发后可以继续学习进阶内容编程工具、项目实战、经验技巧、资源宝库。也可以先简单了解Cursor更专业的AI代码编辑器、GitHub代码管理和协作、更多部署平台等等。加油你一定可以的
