Windsurf零基础搭建网站

一、背景

"种一棵树的最好时间是十年前,其次是现在。从现在开始AI学编程" 

本来已经写了一个cursor的小白AI开发教程准备发布,Windsurf的横空出世让我忍不住按下了暂停键。 

780f9a4eecaf3e205f5473c7f98881ed.jpeg

Windsurf初次体验,它带给我的惊喜远超预期,当我抱着试试看的心态用Windsurf重构原本的Cursor项目时,整个过程出乎意料的顺滑。不夸张地说,它就像一位深谙你心意的搭档,不仅让环境配置变得轻松自如,在代码理解和上下文感知上更是展现出令人惊叹的能力,同样他与cursor一样存在提供了免费的 GPT-4o 和 Claude 3.5 Sonnet 模型,并且有免费的使用期 

 

卓越的上下文理解能力

  • 项目结构识别:Windsurf 能够自动识别项目的所有重要信息,包括目录结构、文件依赖关系等。
  • 跨文件上下文追踪:它不仅局限于当前文件,还能在整个项目中追踪上下文,理解跨文件依赖和模块间调用。

强大的功能特性

  • AI智能代理:Windsurf 的 AI 代理可以在特定任务中“自己动手”,如调试、重构代码等,自动完成一些重复性操作。
  • Cascade 模式:提供编辑和聊天两种模式,编辑模式可以生成和修改代码,聊天模式专注于提供开发建议、解答代码问题。

广泛的应用支持

  • 多语言支持:支持超过 70 种编程语言和框架,适用于前端、后端和数据科学等方向。
  • 跨平台兼容性:支持 Windows、Mac 和 Linux 平台,能够无缝集成在常用的开发环境中。

我30分钟用windsurf快速开发的windsurf学习网站 

bc548502e2b8cf76d476122dcf443b57.jpeg

二、操作步骤

2.1 准备工作

安装Windsurf IDE

  • 官网codeium.com下载安装包(https://codeium.com/)

cf9d7373800f61a43513413632dffb2b.jpeg

  • 安装Windsurf IDE并进入初始化设置

df0a157ff67d3eeaa5b65287d473d507.jpeg

  • 账号注册/登录
  • 进入开发主界面

2717aeabf5c43f8effe760a9de47c2dc.jpeg

熟悉界面

cascade(Ctrl+L)

右侧的Cascade像cursor的composer,如果你没用过cursor也没关系,我来给你解释一下, 

这个是可以直接在项目里面编辑代码文件的功能, 

与cursor比较不同的是,Cascade贴心的将功能分成了两类,一个是纯Chat模式,一个是Write模式 

Chat模式 

不会帮你往项目里写入代码,而是会做一个细心的助理,协助你处理问题 

2a90c3540188728a9d4973b1bca651e2.jpeg5d5f231bfa9227c0f34028c611762375.jpeg

Write模式 

像是得力的助手,直接将生成的代码放入项目中 

自然语言修改代码(Ctrl+i)

163c3e56e2da01af812e126b7da5e3a4.jpeg

2.2 启动开发

开发目标:以"Windsurf学习共创社区"为例,我们将完整演示如何借助AI能力快速构建现代化Web应用 

技术选型:Vue + TypeScript(常用的前端框架具体可以先不用知道啥意思) 

目标用户:零基础开发学习者 

参考项目:Cursor101 

 

开发流程: 

  1. 需求分析与代码生成
  2. 环境配置自动化
  3. 问题诊断与修复
  4. 界面优化与细节打磨
  5. 功能迭代与完善

 

7a275c9b63ae6ea7f7d726daa5af9878.jpeg

 

下面我贴上的与cascade交互的截图都是比较关键的步骤,跟着我的提示照做,就能达到类似最终的效果 

 

  • 输入需求,让windsurf进行code
  • windsurf会事无巨细的将开发的思路讲解出来,并且贴心的给你把环境命令打出来,你只需要不断accept点点鼠标就行
  • 无需打开终端配置环境,我们就直接把代码写好了
  • 但是很有可能,会出现报错,但是没关系,我们把报错信息返回给cascade
  • 经过自动检查后,给出bug所在,访问给的http://localhost:5173,成功run起来了
  • 但是这远远不够,我们可以进一步让windsurf进行优化,但是要注意一步一步来,这样的好处可以验证每一步的成果,以便及时更正AI,这部可能要等一会儿,有点慢,windsurf的编码速度测试下来不如cursor,在每一步都有可能报错,继续返回给AI

 

  • 我们的网页已经初具雏形,接下来只需要优化具体细节

 

8afdfbc747478e867b98f28b94c18540.jpeg

  • 优化导航栏的细节以及首页(PS:生成失败他还会自我反思调整,太强了~)
  • 插入细节图片
  • 不断调整细节ing~~~(PS想要更精准的控制要改的范围记得在cascade里@原来的文件)

 

三、总结

功能演示

 

 

 

四、总结

 

一点小tips: 

设计参考:可让AI分析优秀页面设计并转化为实现方案 

渐进式开发:采用小步快跑策略,便于及时纠错 

精准控制:通过@文件名实现精确代码修改 

 

🏆

优势所在 

🙉

有待提升 

  • 超强的上下文追踪能力
  • 自动识别项目重要文件
  • 强有力的对抗性思考助力程序开发,开发者更省心

 

  • Cascade的交互无法用图片,只能文字,这个比cursor的composer缺少一点感觉,以后如果能加上就更好了

 

后续还会有更多关于AI编程的【理论篇】和【实战篇】敬请期待…… 

📌

嗨,我是Yeadon!作为一名人工智能专业的大三学生,正在努力成为AI时代的超级个体~ 

欢迎志同道合的朋友通过微信【vip2022shopee】交流讨论! 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值