Windsurf零基础搭建网站

一、背景

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

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

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

　

卓越的上下文理解能力

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

强大的功能特性

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

广泛的应用支持

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

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

二、操作步骤

2.1 准备工作

安装Windsurf IDE

• 官网codeium.com下载安装包（https://codeium.com/）

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

• 账号注册/登录

• 进入开发主界面

熟悉界面

cascade（Ctrl+L）

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

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

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

Chat模式　

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

Write模式　

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

自然语言修改代码（Ctrl+i）

2.2 启动开发

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

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

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

参考项目：Cursor101　

　

开发流程：　

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

　

　

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

　

• 输入需求，让windsurf进行code
• windsurf会事无巨细的将开发的思路讲解出来，并且贴心的给你把环境命令打出来，你只需要不断accept点点鼠标就行

• 无需打开终端配置环境，我们就直接把代码写好了

• 但是很有可能，会出现报错，但是没关系，我们把报错信息返回给cascade

• 经过自动检查后，给出bug所在，访问给的http://localhost:5173，成功run起来了

• 但是这远远不够，我们可以进一步让windsurf进行优化，但是要注意一步一步来，这样的好处可以验证每一步的成果，以便及时更正AI，这部可能要等一会儿，有点慢，windsurf的编码速度测试下来不如cursor，在每一步都有可能报错，继续返回给AI

　

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

　

• 优化导航栏的细节以及首页（PS：生成失败他还会自我反思调整，太强了~）

• 插入细节图片

• 不断调整细节ing~~~（PS想要更精准的控制要改的范围记得在cascade里@原来的文件）

　

三、总结

功能演示

　

　

　

四、总结

　

一点小tips：　

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

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

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

　

🏆

优势所在　

🙉

有待提升　

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

　

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

　

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

📌

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

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