Mithilfe von KI zur Entwicklung von Vue3-Projekten können ChatGPT und Copilot 90 % des Codes schreiben

Vorwort

1. KI ist nur ein Werkzeug, sie braucht einen Meister
2. Was Sie arbeitslos macht, ist nicht die KI, sondern Ihre Kollegen, die sich mit KI auskennen

KI erfreut sich in letzter Zeit großer Beliebtheit und verschiedene Artikel und Videos stellen KI und ihre Einsatzszenarien vor. Ich habe auch lange beobachtet.

Für uns Entwickler kann KI nur die Effizienz steigern . Das heißt, durch den Segen von KI-Tools wird die Entwicklungseffizienz verbessert, sodass Sie sie von N Personen verwenden können. So wie ein Auto N-Wagen ersetzen kann.

Also habe ich einfach ein kleines Vue3-Projekt entwickelt, von Anforderungen, Design, Entwicklung, Optimierung bis hin zur Verwendung von KI zur Steuerung des gesamten Prozesses, um zu sehen, wie es ist?

Das Ergebnis hat meine Erwartungen bei weitem übertroffen. KI kann Code effizient und mit hoher Qualität generieren, und 90 % des Codes im Projekt werden von KI generiert. In etwa 1-2 Tagen habe ich dieses Projekt abgeschlossen.

Verwenden Sie ChatGPT, um Anforderungen zu organisieren

Anforderungen werden normalerweise per PM geschrieben, aber ich möchte wirklich sehen, wie ChatGPT die Projektanforderungen verstehen und helfen kann, also versuche ich es auch.

PS: Auch wenn wir Entwickler sind und keine Anforderungen schreiben müssen, müssen Sie die Anforderungen dennoch überprüfen! (Sie können nicht einfach tun, was der PM sagt.) Durch die Verwendung von ChatGPT zur Analyse von Anforderungen können Sie bessere Bewertungsvorschläge machen.

Anforderungsübersicht

Schreiben Sie Ihre Bedürfnisse, Ihren Hintergrund und Ihre Absichten klar auf und stellen Sie Fragen an ChatGPT.

你是互联网行业一名资深的产品经理，现在主导设计一个博客产品的需求，
这个产品是面向编程技术人员的，例如简书、博客园、掘金这种网站。
要求产品以博客功能为主，不要有其他无关功能。你来写这个产品的需求文档，先列出需求大纲。

Es ist ersichtlich, dass die darin geschriebenen Anforderungen sehr umfassend sind und einige davon unerwartet sind.
Diese Anforderungen sind möglicherweise nicht vollständig anwendbar, haben jedoch einen guten Referenzwert.

Verfeinerung verlangen

Nachdem Sie die Gliederung erhalten haben, können Sie weiterhin einige detaillierte Anforderungen erfragen , z

根据上文，请详细描述“博客管理” 部分的需求，按层级、条目列出

Sie können auch festlegen, wie viele Seiten je nach Bedarf und Funktion jeder Seite benötigt werden. Frage wie diese

根据上文需求，你分析需要多少个页面？每个页面都有哪些功能？按条目列出

Mit der Unterstützung von ChatGPT erledigen Sie die Projektanforderungen schneller und umfassender.

Verwenden Sie ChatGPT + Copilot, um Projekte zu entwickeln

以下功能，有的是 ChatGPT 开发的，有的是 Copilot 开发的，其实两者可以切换的，两者在生成代码时有些共性。我想同时体验两者的能力，所以混合使用了，仅供参考。

顶部栏（ChatGPT）

先写一个左右结构的框架

写一个顶部导航栏组件，宽度 100% 。左右结构，左侧是 logo ，右侧是“登录”链接

再开发导航菜单。注意：菜单要通过 url 参数 category 进行搜索，以及激活 activeMenu

使用 vue3 和 ElementPlus 写一个菜单组件，包含：前端、Java、Python、小程序
要求如下：
1. 每个菜单点击时，都跳转到首页，并加一个 query `?category=xxx`
2. activeMenu 要根据 url query `category` 参数实时变化，默认值是空
3. 使用 vue3 setup script 语法

最后再开发搜索组件。注意：通过 url 参数 keyword 进行搜索

使用 vue3 和 ElementPlus 写一个 input search 组件。要求：
1. 搜索时跳转到当前 path ，并加一个 query `?keyword=xxx` ，且保留现有的 url query
2. 实时监听 url query `keyword` 并讲内容显示到 input 中
3. 使用 vue3 setup script 语法

初试 ChatGPT 写代码感觉整体效率非常高，超出预期

• 只要能描述清楚需求，ChatGPT 会给你反馈不错的结果
• 个别代码（如 CSS 样式）需要自己调整一下

注册/登录页（ChatGPT）

给出详细需求，直接用 ChatGPT 生成表单代码

使用 vue3 和 ElementPlus 写一个注册页面，包含一个标题“注册新用户”和一个表单。要求：
1. 页面内容水平垂直居中
2. 注册表单包含：用户名（必填）、密码（必填）、确认密码、昵称、注册按钮
3. 注册表单要根据 item 数据类型设置校验规则
4. 使用 vue3 setup script 语法

【注意】这次 ChatGPT 生成代码有 bug ！！！
经过排查，原因在于 model 和 ref 重复了。然后简单修改一下，即可正常运行。
还是要比自己从 0 手写快很多，它把模板、主要逻辑、表单校验，都给你写好了。
尤其是表单校验的规则，和正则表达式，自己写还得参考各种文档。

PS：AI 是你的助手，依然需要你有专业能力去解决问题。

博客列表（Copilot + ChatGPT）

先获取博客列表的数据。使用 Copilot，写出注释（如下图），回车换行，即可自动生成代码。非常便捷！
PS：生成效果可以参考 Copilot 官网 的动图

在 Vue 模板中写注释 <!-- 遍历显示 blogList 的内容，每个 item 使用 div --> 会自动代码

但是为了 UI 体验，我们会使用博客卡片来显示每条博客。
用 ChatGPT 帮助生成组件代码，写出详细的要求：

用 vue3 和 ElementPlus 写一个博客卡片组件（BlogCard.vue），用于在博客列表中显示单个博客信息
该组件接受一个属性 blog ，是一个 js 对象

该组件的 UI 分为上中下三层结构：
- 上层显示：博客作者（blog.author）并在前面加 icon ，分类（blog.category），时间（blog.updatedAt）
- 中层显示：博客标题（blog.title），博客简介（blog.summary），且点击标题跳转到 `/blog/:id`
- 下层显示：点赞数量（blog.likes），收藏数量（blog.favorites）、评论数量（blog.comments）。每个使用合适的 icon 来表示

还要求：
- 当鼠标 hover 卡片，设置浅灰色背景
- 点击卡片跳转到 `/blog/:id`
- CSS 样式要美观，可参考当前博客网站的样式
- 使用 vue3 setup script 语法

它写的代码整体结构没问题，但还有一些细节不满足我的要求（我们不可能说清楚每一个细节）
然后我继续向它追问：

你的代码大部分写的很好。但有需要改动的地方：上层、下层的内容，都靠左显示，且内容之间要有间隔。

它又重新修改代码，这次效果就基本可以了。除了几个 CSS 样式需要自己调整一下。

博客详情页（Copilot）

首先，获取博客详情页的数据。然后在模板中显示博客内容。
使用 Copilot 根据注释生成代码即可，CSS 样式也可以自动生成。

然后再使用 Copilot 生成点赞和收藏的代码逻辑。写出注释即可生成，非常强大！

博客评论（Copilot）

首先获取评论数据。然后使用 Copilot 写出注释，即可生成评论列表的模板和 CSS 。还可以继续让它根据条件渲染“删除”按钮。

然后写出注释，让 Copilot 自动生成删除、发表评论的代码逻辑，还可以让它增加 confirm 验证。

对于开发场景，感觉 Copilot 比 ChatGPT 更加好用一些。

封装网络请求（ChatGPT）

先封装 axios ，增加拦截器。ChatGPT 写的非常好，不用我们再去翻查文档。

我想用 axios 发送 ajax 请求，需要你帮助封装一下 axios 的各个常用功能
直接写出 js 代码示例

再封装博客请求的 API ，直接使用上面封装的 axios 。

其他工具函数（Copilot）

我想写一个日期时间格式化的函数。 可以直接写出注释，Copilot 会自动生成代码，非常方便。

像这种工具函数是最适合用 AI 写的，它没有什么业务逻辑，输入输出比较规范，AI 生成一般不会有错误。

使用 ChatGPT 优化代码

Sie können den Code, den Sie geschrieben haben, an ChatGPT senden. Anschließend werden Optimierungsvorschläge gemacht und der optimierte Code bereitgestellt.

下面是一个 vue3 组件的代码，使用了 ElementPlus 组件库。
你作为一名资深前端工程师，有什么优化建议吗？
1. 请结合代码，分条目指出建议
2. 请给出你优化后的代码

(贴上组件代码，使用 markdown 代码块格式）

Die darin enthaltenen Vorschläge können nicht vollständig kopiert werden, sind aber dennoch referenzwürdig. Es wird etwas passieren, was Sie nicht erwarten.
Die Optimierungsvorschläge, die ich für dieses Projekt übernommen habe, sind:

• Verwenden Sie watchstattdessen watchEffect, um den Hörbereich zu verringern
• Vereinfachen Sie die Formularvalidierungslogik, um den Code klarer zu machen
• Zum Zwischenspeichern von Daten verwenden computed, um Doppelzählungen zu vermeiden
• Teilen Sie die Submit-Funktion auf, um die Codegröße einer Funktion zu reduzieren

Zusammenfassen

Mit dem Segen der KI wird das Schreiben von Code sehr effizient sein. 90 % des Codes können durch KI generiert werden, sodass eine Person die Effizienz einer einzelnen Person wirklich maximieren kann.
Ich verwende immer noch die GPT3.5-Version. Es wird effizienter sein, wenn Sie für die Nutzung von GPT4.0 bezahlen und das zukünftige CopilotX nutzen.

Die Popularisierung von KI kann tatsächlich dazu führen, dass einige Leute ihren Job verlieren, insbesondere diejenigen, die nur CRUD schreiben und nicht effizient sind. Natürlich sollte eine solche Person KI-Tools nicht aktiv erlernen.
KI ist nur ein Werkzeug, sie braucht einen Meister. Was Sie arbeitslos macht, ist nicht die KI, sondern Ihre Kollegen, die sich mit KI auskennen.

Natürlich bedeutet KI nicht, dass man sie einfach nutzen kann. Es scheint ein einfaches Chatten und Schreiben von Notizen zu sein, aber es verfügt über viele Fähigkeiten und Schritte.
Wenn Sie schließlich den detaillierten Entwicklungsprozess dieses Projekts erfahren möchten, können Sie gerne privat mit mir kommunizieren ~