【视频】DeepSeek+Vscode+Cline 20分钟完成一个完整的前端项目

今天我们给大家嗯来看用 VSQ的怎么来去使用 VSQ的加 client去使用这个 deep sik。

我们先在呃插件市场把 can安装上用 SQ的去安装这个开有的插件。

这个插件呢安装好以后，

我们看到这个已经提示已经可以使用了。

那这个时候我们先打开一个文件夹，

我们先新建一个项目。

好，

我们看到我们先找一个应用，

随便取一个文件夹，

这个就叫 deep sik吧。

啊，

我们在这个文件夹下面呢，

刚刚我们已经把好，

我们已经把嗯插件已经装上了。

好，

我们打开快捷键能找到。

好，

我们把 plan拿，

因为我们默认把这个 plan是写在这边啊，

我们可以把这个这个窗口给它。

啊，

换到其他地方啊，

你可以换到这边来，

对吧？

可以换到这边来，

这边的话我们就可以不要。

好，

我们回到这边，

我们现在看到这个是一个空的项目啊，

我们在这边看到 k爱的它的这个配置，

我们把这里面就会有 do ic的相应的选项。

我们把相关的 API去找到把 API搞过来，

找到自己的 API，

然后把相应的 API放在这儿来，

然后我们试一下 OK就可以用了，

对吧？

那我们可以看到呃，

我们可以看到权限先得给它勾上去，

权限先给它勾上去 OK然后我们把请求次数改大一点，

改到两百吧。

OK那那是要不要自动同意呢？

这个可以根据自己的选择去去试一下。

好，

我们可以先不要我们保持和这个 coser一样啊，

我们先按这种方式去去处理。

好，

这个时候呢我们可以把我们的需求呃放进来。

那我们可以看到呢，

它其实也支持呃这个它有一个图片啊拍照，

因为在这个，

嗯，

电脑上的是不行的那我们先把我们的需求放进来。

好，

我们准备了一段需求，

还是我们之前准备的就是一个九宫格的外部项目。

那我们把这个相应的这个需求，

文档文件丢给他，

然后看他来这个嗯处理。

那我们看到呢它是一个权，

他要会提示说这个全新的项目啊，

这个每一次 API花多少钱就给你算出来了，

这个感觉还可以啊，

然后呢可能要去创建这个项目，

然后去执行啊，

我们可以去嗯按照它的提示，

我们就可以先去执行这个项目，

它会创建这个项目。

在这个下面创建项目，

创建项目以后呢，

它就可以来了，

包括安装依赖。

我们看到呢它这个时候已经开始在写代码，

对吧？

那我们这个时候可以保存嗯，

保存以后，

它会继续往下执行。

我们看到它这个你开始在创建其他的页面，

包括注册页面等等。

我们也看到相应的代码都在生成，

那整体感觉还挺好。

我们可以。

如果你刚开始这个为了方便，

我们可以直接嗯按照它这个嗯直接保存啊，

我们就不用去这个后台的交付进行每一次确认了。

那看到他这个时候已经开始在实现项目。

它的页面我们也看到包括组件，

其他页面都在实实现。

i在在实现接下来每一个页面，

具体代码的实现都已经在做了。

我们可以看到每一次的这个 API的花费大概花了多少？

这个 token啊，

我们看到我们刚刚已经经过五六次，

我们通过这边实时的也会看到你的这个 API的 token用量，

一会儿会变，

现在还没有变啊，

它这个完了以后可能应该会变。

嗯，

我们可以看到它已经在实现具体的登录页面了，

对吧？

已经在实现登录的页面，

可以看到它在创建呃手机注册页面验证码。

我册成功以后的验转。

一会儿们们看一下它能否创到我们直接给他的这个需求，

执行完以后就可以实现前端项目的运行。

这个出现在 coser中有试过啊，

基本上是可以，

但是还是需要做一点点的微调，

尤其是在依赖这一块，

要做一些微调啊，

或者说你可能需要在这个需求文档当中更详细的说明你需要用什么样的技术或者用什么的东西西它会出现在 cosr中呢？

我们用 cloud三点五，

它会出现某一些页面没有。

去实现它可能是一个空文件，

没有文件内容啊。

我们这里面其实嗯这个文档其实包含了两部分，

一个是前端的这个应用，

就是前端的用户的界面，

还有一个管理后台的界面，

管理后台呢主要就实现现一工工具的增加删除修改。

我我看看到已已在在实现端端这部分的代码。

然后我们也提示他这个登录的时候候，

要用滑款的验证在需求里面有提到。

好，

这个时候我们看到它已经在完整的去实现了。

我接下下看看看已已在实实到到工工具列表的增删，

改查了到后台的这部分功能，

工具工具管理这一块的功能。

我们看到它这个默认是用的 GS。

因为我们在需求里面其实是没有明确是用。

呃，

你是用什么技术？

我们只提到要用这个 IDD来去实现前端的这框框架，

我们看看到它是默认是用的 GS。

而用 CO sl呢？

它默认是用的这个 TS。

那这个呢但是它根据你个人的这个呃对于嗯技术的实现程度啊，

或者说你熟悉哪一块，

你就可以使用选择性的用哪一块的功能。

那我们看到这个是比较让我呃意外的，

因为在呃，

用其他的这个语言，

包括我们用呃 GP的 GPT的四 o我们在创建的时候呢，

在工具的管理界面副文本是没有去实现，

也没有识别到的。

这个我们看到它非常详细的实现了。

好，

他现在已经开始在做呃基础配置了，

已经开始在做项目的依赖。

我们看到整个项目非常流畅啊，

运营这个呃编写的这个节奏啊，

我们看到它是一步一步去实现需求前端后端，

然后项目依赖等等。

好，

我们看到呃这个已经已经在到这儿了，

已经都要实现去安装依赖了。

那我们去实现非常依赖。

OK刚刚呢是相当于整个他需要进行人工操作，

所以它暂停了。

那接下来他去创建路由同时再创建路由和安装依赖。

这个也是让我有点意外的，

就是他一边在写代码啊，

一边在安装依赖的是可以的那我们在 cosr里面有没有这么好的这个体验啊？

从现在这个来看的话，

嗯，

写代码的这个节奏是非常流畅的，

中间没有被任何打断，

你效果也很好，

包括这个项目的结构也非常完整。

那包括这个依赖，

如果是用 cosl去，

五来实现我发现要么就没有创建这种环境变量，

要么可能某一些依赖或者某一些文件，

它可能会落下，

没有完整的去实现这个项目。

那我们看到这个它现在全部创建完了以后呢，

还把一个清单啊你列出来了。

那我们也看到，

你可以直接去使用 NPM star。

好，

他看到这里呢去实现了 NPM star，

对吧？

然后我们再去运行一下这个启动一下。

NPM磁带。

好，

这个我们看到呢它实际上嗯去打开，

但实际上上一步这个 NPM star没有没有这个实现成功啊。

NPM这个上一步有有没实现完，

可能我们看一下。

NPM star好，

我们看到这个 NPM star呢，

他告诉我们说这个没有呃，

他这个低士啊，

我们看到他按照他这个节奏和这个流程下来以后呢，

走到这一步，

代码，

看起来是已经非常完整了，

项目也非常完整了。

然后他给出的这个建议和呃命令呢，

我们也执行了。

但是我们依然看到这里面会可能缺少整个项目依赖，

我们把这个，

嗯，

丢给他看一看。

好，

他说这个没找到。

那我们丢给他看一看他是怎么说。

同样和呃这个 coser一样，

我们先把错误的代码丢给他看一看。

好，

他说的是这个依赖可能没有装。

好，

那我们去执行一下这个依赖的安装，

再来看一看这个效果怎么样，

能否正常的启动？

好，

它这个时候同时呃这一点就非常好哈，

比这个 coser好很多。

就是他知道我下一步我安装了依赖以后，

我要进行启动，

所以他又给出了下一个命令。

但实际上我们看到还是没有呃这个成功，

对吧？

我们看嗯这个时候我们可以回过头来看一下这个 package里面的这个这个它的它的这个配置啊，

实际上是已经有了，

但是还是没有安装成功。

那我们可以继续告诉他还是没有成功。

这是嗯嗯好，

我们还是告诉他还是一样。

然后呢，

再去看，

可能是安装失败，

说用全局安装试一下。

那我们再试一下，

用全局安装，

看能不能解决这个题，

按理说应。

就可以解决啊，

刚刚这个启动的时候，

它是这个命令不认识。

那我们看到呢它进一步下一个命令，

它自动去执行。

好，

这一次这个好像成功了，

对吧？

好像成功了，

而且它这个我们看到它这个嗯拿起来一点啊，

我们看到它这个我没有找到这个 HTM文件啊，

这个主主文件它可能忘了生成了。

嗯，

有少数。

我觉得目前来看的话，

呃，

相当于我们经过两次两次的这个微调，

或者说两次的错误给它进行提示，

然后让它进行修复相关的这个 bug。

嗯，

我们进在进行了两次对话，

那么这个项目应该就能正常启动起来了。

这个比 coser这个体验感觉好很多，

确实很强大呀。

这个雷总花一千万找的这个小姐姐确实很厉害呀。

好，

我们看到这个时候看到已经在开始访问这个网站了。

那我们看到在转圈的时候呢，

说明这个网站已经生效了，

就是这个事还没有完全启动成功。

好，

我们看一看给我们会不会有惊喜，

看一看它呈现的结果是什么样子，

能否在这短短的时，

三分钟把一个完整的项目前端后端给展现出来，

从编码的流畅度和项目的完整性，

以及最后 bug的数量多少修正的数量来看，

目前体验还是不错的。

那我们看到在启动的时候呢呃还是报错了。

那我们可以看到一些这些问题，

那我们依然呃用把这些东西呢丢给它，

丢给它。

好看能否我们要经过多少次的呃这个和他的对话，

然后才能看到。

那我们通常看到呢，

一般都是这种依赖依赖可能不够完整啊，

依赖不够完整。

也就是说在呃 package里面的依赖可能不够完整。

这个呢在用 coser去实现的时候呢，

呃也是一样的，

也是一样的。

那我们看到呢现在界面好像有有反应了，

但是应该还在继续执行。

the嗯好，

他说已经这个已经有了，

要不要用其他的，

我们不用。

停了以后重新启一下算了，

因为可能刚刚已经在运行啊，

它它是已经呃有一个进程，

那我们先先换一个吧，

换一个单个启动吧。

因为这个之前那个进程可能没有正常结束。

那我们先不管它，

嗯，

我们一会儿再最后再去把那个进程 q掉就可以了。

好，

实际上是因为我们这个这边的，

因为我们这边有这个端口开着啊，

因为我们有这个终端开着，

所以它可能没有关掉。

他每次在运行 commandde的时候，

他会新开一个窗口。

所以说我们看到了这个有错。

好，

我们继续把这些错丢给他。

好，

那说明这个其实也是不成功的对吧？

那它继续可能有一些文件还是缺少的，

或者路由不对。

那我们不管它让它去自动去调整。

我们看到呢其实错误已经改善了很多啊，

改善了一些。

那我们继续把剩下的丢给它，

还有二十个葱。

可以继续在边啊，

我们看到还有十九个，

这里看到还有十九个，

然后继续在继续再优化，

继续再处理。

因为它可能有一些方法，

但是在线的时候相当于只是写了一个嗯墨 ck的，

或者是说一个我们叫圆形，

对吧？

好，

我们看到现在应该还有两个错误，

这两个错误他应该还在继续处理。

我们看一下，

看一下会不会有惊喜。

好，

我们把最后这个错误丢给他，

应该最后这两个错误啊，

我们看到这儿还有两个错误。

好，

他应该做了调整以后，

我们看一下最后的这个结果怎么样，

哎，

怎么又多出九个错误来了，

我们继续把内容丢给它。

所以在发现写代码还是容易啊，

改 bug比较的难啊，

因为它可能涉及，

整个全局的项目的文件引用调整到这里，

可能会影响那里，

但是整体来说他还是比较好。

虽然他花的时间很长，

花的这个解 bug的时间很长，

而且你看现在 bug还越解越多，

嗯，

但是给人的感觉还是挺好。

你可能把这个错误信息丢给他以后，

你就在旁边去泡个咖啡，

对吧？

又回到了我们五个错误，

泡个咖啡，

让他去处理呗，

喝口水，

然后等他处理，

看他这个能不能把这个错误或者 bug彻底解决完，

对吧？

如果这个解决不了，

那说明还是需要我们人工干预的比较多，

那目前来看应该是没有问题的。

至少我们看到错误是越来越少，

对吧？

到三个了，

嗯，

不出意外的话，

应该很快就可以把相应的问题处理掉。

我相信这个还是可以的。

那我们看到它最后一个 bug了，

我们看到最后一个 bug了啊，

不要再出现更多的哟。

如果再出现更多的，

但实际上我们看到你看还是虽然说可能它不影响编译吧。

但是有一些在运行的时候肯定还会报错，

还是有一些隐藏的 bug。

这个和呃 coser这个 cloud三点五其实也有类似的问题，

但是呢这个其实已经很节约时间了。

你我们看到这个整个项目的代码还是蛮多的对吧？

如果你自己要去写，

虽然功能其实不复杂，

嗯，

你如果有成熟的框架呢，

也会比较快的去搭建。

但是如果你从零开始去写这个项目，

那如果是这个前端后端的代码，

你都要去自己去敲的话，

那么花的工作量还是会非常大的。

而且这个是一个比较简单的功能，

如果是一个比较复杂的功能，

可能它的作用和价值就会更大。

那最后我们看到其实就这两个小问题了，

我们再继续让它来处理。

因为你整个代码呃可以看到它写代码前期写基基础的框架大概花了十分钟嗯左右，

然后解代码现在花了接近二十分钟了，

对吧？

再接近三十的话，

可如如果写代码三分之一，

修改代码三分之二。

这个和我们平时这个开发快速开发也差不多啊，

你要求一个写代伙儿加班，

对吧？

也非要他这个半夜嗯一个通宵搞出来，

嗯，

最后通宵是搞出来了。

我们发现这里有问题，

那里有问题啊。

好在这个它的时间效率还是比较快的，

比较高的。

那我们看到编译以后，

现在有了这么一个东西，

我们丢给他，

我们也不知道是什么的话，

我们就直接丢给他。

我们发现他可能在最后改完了以后，

其实改了一些其他的东西，

可能导致整个有点小问题啊，

我们看到整个界面还没有出来，

对吧？

OK让他来处理，

我们看到错误其实已经没有了。

但是我们看到这些，

嗯，

比如说这个没有使用的变量啊，

其实它肯定是有用的。

但是呢呃这个时候他没用，

那就说明肯定代码里面还是有一些小问题。

然后刚刚的这个呢让它需要重新来重新来编译，

我们看到它需要重新编译，

我们把这个给它去掉，

重新编译一下。

好，

重新编译，

然后重新启动。

我们看一下它能不能带来意想不到的效果。

好，

这个这个还没有出来啊，

因为它还在编译，

它这个已经在发布了。

其实这个时候发布发布好像没那么重要啊。

好，

这个时候它编辑完了以后，

重新打开这个页面，

我们期盼已久的页面终于出来了啊。

那我们看一下登录一下，

这个现在是又需要注册啊，

我们本身也有这个功能。

那我们你这个可能需要调整一下逻辑，

对吧？

我们可能需要默认，

不需要登录，

对吧？

或者是说嗯对我们默认不需要登录，

只需要在使用访问这个的时候才需要登录，

我们这个给他给它调整，

对吧？

呃，

调整一下页面结构啊，

没打开啊，

调整一下呃，

登录的逻辑，

默认情况下不需要登录。

好，

我们把这个让它调整一下，

默认情况下呢，

不需要登录，

看看它做哪些处理中了以后。

那就可以直接进入首页了，

对吧？

嗯，

这种调整呢最好不要再出现 bug了，

对吧？

这是最好的，

就是一个小的调整。

我告诉你怎么调调整完了以后直接用就可以，

就直直接产生效果就可以了。

好，

我们看到它应该是运行，

完了，

我们重新访问一下页面。

好，

我们看到它这个效果也出来了啊，

也看能看到就是呃我们在需求里面，

我其实这个地方可以把需求给大家看一下，

就是需求里面就是提到这个呃需要有一个我们对比一下吧。

我们把 custer这个文件打开好，

其实就是 cosr里面我们也是这个需求啊。

嗯，

比如说我们是基于这个 and d的这个我们看一下这个基于 and d的这个外部项目，

对吧？

采用 react，

然后呢采用九宫格，

嗯，

要显示更多这一点呢，

它现在应该是采用九宫格，

但是它没有显示到这个八个，

待会我们再继续可以优化一下，

然后有缩略图，

对吧？

然后我们会有这个呃全提供一个全局查锁的一个实索框。

然后我们有注册，

有登录，

有密码，

找回，

这些都是很 OK的。

然后我们看到这个，

点击详情，

我们也看到它这些说明这些都是有的。

然后使用也是有的，

就跳转到这个具体的使用界面。

我们也看看到它这个图片和这个效果。

我们告诉他做一个简单的小的调整，

就着目前首页只有两个工具，

而且图片没没有正常显示，

请增加工具的数量到八个，

最后一个为更多嗯图片要显示出来。

呃，

我们这个呢让他在 API的这个默 ck，

其实它就是默 ck的这个数据啊，

嗯他需要把那个图片和样式改一下，

这样我们看到效果呢会更直观一点。

整体来看呢，

你看这个时候他会去生成这个相应的数量啊，

呃看到这个相应的内容。

那么我们最后一个是呃，

我们之前说的是最后一个是更多，

对吧？

然后他弄成了八个色的这个更多，

嗯，

这个呢我们需要给它在。

也调整一下工具的数量应该是抱歉没开啊，

工具的数量应该是八个加上一个最更多工具，

一共是九个，

形成九宫格。

好，

看看它这个呃数量它应该在进行调整。

因为他可能我们原始需求里面，

这个时候它可能就已经把原始需求给忘了。

因为你它可能以你现在这个调整为主了，

对吧？

然后呢，

它我们可以看到它调整了以后嗯，

有这么一个内容。

好，

它有九个了，

第九个是更多，

其他的个是嗯这个其他的工具，

我们看到它应该有效果。

嗯，

看一下页面。

好，

我们看到是这样的啊，

它现在应应该是把它全部都出来了。

然后呢，

我们看到这个呃图片是没有，

因为这个图片它应该是我们看到这个有点问题题，

因为不是按按原格格示的啊，

我们继续让它调整一次，

现在首页并没有按。

按照九宫格的形式进行显示，

请调整。

同时图片也没有正常显示，

它可能这个地方对于九宫格啊不是很理解。

那么当然可以进一步的让它我们看它其实这个地方的提示啊，

它其实也是九宫格，

也是理解到三乘三三乘以三的这样一个呃这个图片。

那进行调整，

可能最开始它是没有理解到调整以后呢，

对于图片，

那我们看到它可能创之前可能这个目录没有创建成功啊，

有可能就导致这个它产生的图片没有没有啊，

所以它现在去做一些处理啊，

它生成这个相应的，

我们可以看到它生成相应的这个图片啊，

之前可能这个图片都没有啊。

我们再回过头来看一下啊，

我们通过这儿看呢，

它实际上现在已经是改成呃三乘三的了，

对吧？

这个已经是九宫格的形式了，

这个没有问题，

就图片缩略图没有显示出来。

就这个图片我们看到这个图片没有显示出来，

因为这个路径。

可能有点问题，

对吧？

还是没有显示我们在这里看它其实是打开的图片的路径是不否正常。

我们看一下这个呃下面是不是有这个图片，

我们看到这些图片啊，

因为这个图片的图片的这个内容啊，

没有可以用一些嗯让他用一些网上的图片吧。

图片你可以用网络的图片链接代替，

不用生成图片。

嗯，

这样呢让他去直接用一些呃这个网络上的图片啊，

我们就可以看看效果就可以了。

因为这个图片当然需要我们提前准备的话，

呃，

自己因为我们自己的话肯定是需要上传的对吧？

通过后台进行上传，

然后才有。

那我们直接让他告诉他，

直接先弄一点假的图片，

你先看看效果，

对吧？

有了图片，

整个界面效果就更好看一点。

嗯，

图片为什么还没有呢？

啊，

它这个图片可能也是生成不了嗯，

它这个图片也是不能显示的，

你给的图片也是无法，

显示的请给正常可以正常显示的图片。

那我们像这种的微调啊，

你就直接告诉它怎么去调整就好了。

那同样的这个功能呢，

我们发现嗯它给出的就是目前我们看到的这个功能呢，

其实基本的功能或者我们就要做做一个呃，

或者说我们就要做一个 demo啊，

这个效果应该还是可以的。

但实际上如果说你要完整的一次性达到嗯完全可以用的状态的话，

那实际上嗯可能还差一点。

所以整个我们看到现在图片已经可以了，

已经可以用了，

它已经出来了。

那么这里面的一些每个页面，

你可能还进行微调。

当然这个也取决于你的这个呃，

你取决于你的这个需求写的是否够详细，

你怎么样去给他描述的这个。

因为我们写的这个呢就是很简单的，

只是把我们要做什么东西给他，

具体是什么样子，

这些我们都是没有定义的。

但是我们从现在这个效果来看，

还是很不错的啊，

还是很不错的。

你看整个这个效果就已经出来。

那么以前的登录它这里没有，

但是我们可以继续告诉他，

你比如说你在利用立即使用工具的时候啊，

要进行判断。

如果没有登录，

就跳到登录界面，

这个都是可以让他直接调都是 OK的，

其他的功能就等着大家一起去探索吧。

好，

最后我们看一下，

它应该还有一个呃管理的后台地址，

我们可以看到它一个管理后台进行地址，

然后进行登录，

对吧？

然后我们可以去嗯我可以用用户去登录嗯滑块这个这个地方呢它没有实现，

没有实现。

然后你可以通过这个去去做一些这个登录的验证。

你看它其实这个里面我们可以看到它这个是没有相应的东西。

好 OK，

那我们今天就到这里了，

其他大家去都去用一下吧。