一文教会你前端开发如何使用chatGPT提高效率

想想chatGPT已经火起来快小一年了，每天看着新闻感叹，好厉害，好想学，闲暇之余翻着相关技术文章，总是一知半解，需要申请各种账号，奈何人懒，且笨还怕上当受骗，估一直拖延至此，过年回来刚刚遭受社会的毒打，无奈重新找了一份工作，恰逢新公司技术部门请了阿里大佬（清华计算机博士）来做chatGPT分享，很难不爱，浅浅记录一下入门

一，安装 

很多文章都有介绍，需要谷歌账号，邮箱啥的，太麻烦，咱们目标就是体验chatGPT，所以直接使用插件就行，感谢大佬们的努力。

1，打开谷歌自定义控制（就是右上角三个点）-> 更多工具 ->  扩展程序

2，点击左上角菜单，最下方打开谷歌应用商店

3，搜索 wetab 新标签，如下图（我本地已经安装好了），下载后应用扩展

 

4，当然直接安装chatGPT也可以，正版的在这

 

这个就得注册账号，登录巴拉巴拉的，比较麻烦，建议熟悉后使用

5，回到wetab安装后的界面 ，界面挺好看，不过这次主要使用其中的chatGPT

二，使用 

     首先进入可以看到这样一个界面

当然，聪明的你可以直接忽略上方的广告和打赏，开始正常使用

你可以把chatGPT当做一个正常程序员来对话，不过和他沟通的时候需要带上一点话术技巧，这个需要大家去自行摸索，比如下面例子：

作为一名前端开发程序员，你会使用vue3，ant design vue（可以是自己项目的框架），现在要实现一个xxx 功能，请给我具体实现方法 

然后针对答案进行逐步完善，chatGPT会根据上下文进行完善修复相关答案 

三，chatGPT能够帮前端开发干什么（其实是具体使用，想想大家都聪明绝顶这部分可有可无）

1·，代码解析

很多情况下我们需要协同合作，或者去修改老项目代码，但是你看到一个组件，没有注释，或者去接触一个新的框架，自己相关知识还不熟练，就避免不了去询问同事，这多少会麻烦到别人，也显得自己很low，有了chatGPT，可以自产自销，凡事不求人，我求AI

先上传代码，在加上代码解析，或者 直接告诉chatGPT 帮我解析一下代码都可以，针对不懂的点继续深入提问

2，代码注释

优秀的程序员往往离不开优秀的代码习惯，而代码注释是不可或缺的一部分，但是有的时候任务重，时间紧，往往不得不去做个舍取，这不，AI帮你一键，不满意的地方可以自己调整

 3，代码编写

AI不会骗你，但是AI会理解错你的意思，在用AI完成需求的时候，一定要描述清楚，可以通过多次提问的形式纠正，直到得出你想要的答案，也可以直接拆分成小的单元，AI生成代码并不能读取本地组件库，所以有时候会显得很low

下面还有完整方案，图片没有截取完整， 拿到代码后需要根据自己项目去调整，并不能保证可以直接使用，当然，比如生成一个处理数据函数这些，再也不用自己去想遍历循环，直接告诉AI帮你处理就可以

4，代码bug修复

需要上传完整代码，单页应用使用较多，可以根据代码推断出可能出现问题，看自己公司保密政策慎用，配合代码解析可以轻松定位问题

5，代码优化

会按照标准规范重新生成你的代码，可用于老旧代码优化，新项目都有自己的风格，无需多言

---

 下面开始一些是偏测试后端相关应用，就简单列举一下

6，写测试用例，告诉chatGPT需求点，自动生成文档

7，生成测试数据，mock数据

8，数据采集（python）

9，设计数据表结构

10，给数据表添加数据

11，搭建Flask Service

12，搭建uni-app demo

13，搭建web应用

14，安装Docker

其他的，编辑脚本，生成文案，生成海报，图片等等 功能庞大可以自行摸索

使用chatGPT可以从项目的新建到部署，从0到1，包括前端，服务端，测试等整个流程打通，根据技术分享来看，这不是前端的价钱，干的是全栈的活，我这边提取了部分前端相关记录一下

作者文字水平较差，也是想到哪写到哪，如有错误，还请指正，欢迎大家一起分享chatGPT使用心得，AI确实很强大，所以更要积极拥抱他