foreword
- AI is just a tool, it needs a master
- What makes you unemployed is not AI, but your colleagues who know AI
AI is very popular recently, and various articles and videos introduce AI and its usage scenarios. I also observed for a long time.
For us developers, all AI can do is improve efficiency . That is, through the blessing of AI tools, the development efficiency is improved, allowing you to use it as N people. Just like a car can replace N carriages.
So, I simply developed a small Vue3 project, from requirements, design, development, optimization, using AI to operate the whole process, to see how it is?
The result greatly exceeded my expectations. AI can generate code efficiently and with high quality, and 90% of the code in the project is generated by AI. In about 1-2 days, I finished this project.
Use ChatGPT to organize requirements
Requirements are usually written by PM, but I really want to see how ChatGPT can understand and help the project requirements, so I also try it.
PS: Even if we are developers and don't need to write requirements, you still need to review requirements! (You can’t just do what the PM says) Using ChatGPT to analyze requirements will allow you to make better review suggestions.
Requirements Outline
Write down your needs, background and intentions clearly, and ask questions to ChatGPT.
你是互联网行业一名资深的产品经理，现在主导设计一个博客产品的需求，
这个产品是面向编程技术人员的，例如简书、博客园、掘金这种网站。
要求产品以博客功能为主，不要有其他无关功能。你来写这个产品的需求文档，先列出需求大纲。
It can be seen that the requirements it writes are very comprehensive, and some of them are unexpected.
These requirements may not be fully applicable, but they are of good reference value.
Demand refinement
After you have the outline, you can continue to ask some detailed requirements , such as
根据上文，请详细描述“博客管理” 部分的需求，按层级、条目列出
You can also let it design how many pages are needed according to the needs , and the function of each page. question like this
根据上文需求，你分析需要多少个页面？每个页面都有哪些功能？按条目列出
With the support of ChatGPT, you will complete the project requirements faster and more comprehensively.
Use ChatGPT + Copilot to develop projects
以下功能，有的是 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 优化代码
You can submit the code you wrote to ChatGPT, and then it will make optimization suggestions and give the optimized code.
下面是一个 vue3 组件的代码，使用了 ElementPlus 组件库。
你作为一名资深前端工程师，有什么优化建议吗？
1. 请结合代码，分条目指出建议
2. 请给出你优化后的代码
(贴上组件代码，使用 markdown 代码块格式）
The suggestions it puts forward cannot be completely copied, but they are also worthy of reference. There will be something you don't expect.
The optimization suggestions I adopted for this project are:
- Use
watchinsteadwatchEffect, to reduce the listening range - Simplify the form validation logic to make the code clearer
- Use
computedto cache data to avoid double counting - Split the submit function to reduce the code size of a function
Summarize
With the blessing of AI, writing code will be very efficient. 90% of the code can be generated by AI, one person can really maximize the efficiency of one person.
I still use GPT3.5 version. It will be more efficient if you pay to use GPT4.0 and use the future CopilotX.
The popularization of AI may really cause some people to lose their jobs, especially those who only write CRUD and are not efficient. Of course, such a person should not actively learn AI tools.
AI is just a tool, it needs a master. What makes you unemployed is not AI, but your colleagues who are familiar with AI.
Of course, AI doesn’t mean you can just use it. It seems to be simple chatting and writing notes, but it has many skills and steps.
Finally, if you want to know the detailed development process of this project, welcome to communicate with me in private~