为什么要用Cusor?
由于我不会写代码.完备不会
而Cursor是不会写代码人的救星,如果你是这方面的专家,这篇文章或许不是为你准备的
须要什么/准备能力:你可以不会代码,但是你学习能力有办理问题的勇气
准备:一台能科学上网的电脑(win或Mac均可)
Zion:适用web版本,目前小程序不支持
工具:下载cursor,下载地址:https://www.cursor.com/,安装过程略,免费试用就行,能免费2周,听说2周后删除账号能连续体验,无限续杯
理解代码组件:大概看一下就行https://www.yuque.com/functorz_doc/study_path/xd6tbshovy4y00ax
关于cursorcursor是魔改的VScode,如果之前没有cscode干系履历的化,建议还是自己理解一下软件的基本操作,
其余刚开始建议cursor最好设置一下:
设置成中文版:
在cursor中必要主要的是打开Composer,全部打开
由于默认cursor会全英文和你互换,我一样平常会让他用中文和我互换,Rules for AI相称于是全局的Prompt
整体流程解释
全体流程大概是这样的,ai编码是可以全部交给cursor的,但是其他步骤是要自己来做的:
暂时无法在飞书文档外展示此内容
以下是我常用的终端指令
案例
#Zion命令############################### 安装zion组件npm install -g functorz 登录npx functorz signin XXXX@XXXXXX XXXXXXXXX 初始化(拉取模板)npx functorz create {yourproject} 发布npx functorz publish#其他常用命令##########################进入目录cd XXX会到上一级目录cd .. 安装依赖npm install 打包npm run build 测试npm run dev那我们还是按照真实的案例来走一遍
案例1:iframe组件待更新
1/新建项目首先打开cursor,顶部菜单选择文件/新建窗口,
然后选择,或者新建一个目录,如weishao_iframe
然后你就得到了要给非常纯净的编辑器,如下
2/初始化项目
顶部菜单终端/新建终端,就得到以下界面
如果你之前没有安装过zion组件,最好安装下,虽然我不知道是干嘛的 npm install -g functorz
登录 npx functorz signin XXXX@XXXXXX XXXXXXXXX
XXXX@XXXXXX XXXXXXXXX分别是你的zion邮箱和密码,如果你之前是手机号登录的,可能须要去zion设置一下
https://zion.functorz.com/userCenter/accountSettings
登录成功后便是以上的界面
接下来是初始化
npx functorz create weishao_iframe
从顶部菜单,文件/打开文件夹,选择刚刚初始化建立的文件夹
由于Cursor如果不是在根目录处理的话,常常目录混乱,以是还是建议每次都在根目录下处理
此时你左侧是这样的,
顶部菜单终端/新建终端
安装依赖
npm install
安装完造诣上图所示,可能有一些告警,但是不出错就问题不大
做好这统统好就准备开始ai编码了
3/AI编码
前戏结束,重点来了,终于开始例如Cursor来AI编码了.
向AI描述需求
快捷键ctrl+shift+i(mac彷佛是cmd+shift+i)
呼出composer
输入prompt
好的需求prompt决定了AI给你的结果,一定要负责对待,以下是我建议的prompt构造
分为业务需求和zion代码组件解释
暂时无法在飞书文档外展示此内容
由于zion代码组件解释会常常用到,以是我会有个文档来专门存放,而且日积月累,会不断的优化这个文档,例如下面的.(本文档暂时不公开)
但是业务需求就比较大略了,如果不繁芜的组件一样平常几行字就能讲清楚
例如
iframe这个组件我的业务需求是
写一个iframe组件,变量是网址,宽度和高度 @zion代码组件解释没错,写一个iframe组件便是这么大略!
你可能好奇@zion代码组件解释 是什么,在刚刚的composer界面新建一个natepads,命名zion代码组件解释 后创建
在写需求的时候换行后输入@就能涌现下面的界面,选择notepad后选择刚刚建好的
输入好后点击回车了,右下角的大模型看各位习气了,一样平常我用的是claude3.5
以下便是ai开始剖析了
以上是ai处理的的过程,
如果处理完成后会涌现以下几个按钮,可以看到cursor最大的特点是多文件编辑,如果点击accept all后就会赞许所有修正,
点击后就会更新所有代码了
测试+修正需求
一样平常很难一步到位,修正需求再说难免,
在终端里面输入测试指令进行测试,如下
npm run dev
终端会给你个链接地址,crtl+点击后在浏览器中查看效果,可以看到,效果如下
并且看到组件中新建了一个夹,构造和文件名符合zion的规范
而且在index.ts中这个组件也声明出去了,
可以看到IframeComponent.tsx中ai帮我设置了3个变量,分别是url,宽度和高度
从app.tsx中可以看到ai给变量设置了一下测试的参数
完了,觉得一步到位了,不过我们还是体验下修正代码的流程
连续打开composer,输入修正需求
ai处理后,点击accept,然后连续之前的测试流程(由于百度不许可iframe,我改成了当前文档的地址)
测试创造高度只有一点点,以是我连续问AI,ai会需改代码,可以看到赤色的是删除的,绿色的是新加的,这时候点击acceptall 后就可以看到全屏显示了
3/打包+提交变动
本地测试成功后,就可以本地打包,由于本地打包的时候有时候也会涌现问题,能看到问题出在哪,直接pulish到zion的化是不知道问题在哪的,以是还是推举先本地打包测试
终端中输入
npm run build
很合营,出错了,我们恰好可以看下,如何办理,左边是缘故原由,我一样平常
让ai来办理
可以看到引入了109-135行内容,便是刚刚出错的代码,然后大略写下问题后回车
连续acceptall,后连续打包
npm run build
恭喜,涌现界面解释成功了,可以开喷鼻香槟了,后面都是些例行操作了
