目录
1、准备好vscode编辑器(建议安装版本 1.84 及以上)，单击前往 VS Code 官网下载。
快速安装：如果您已正确安装了 VS Code，单击一键安装腾讯云 AI 代码助手。
4、到这里腾讯云AI代码助手就集成完成，支持AI 助手对话功能和代码补全功能
（1）提问：“请帮我生成一个vue3项目，并集成TDesign （VueNext 组件库）”
（2）按照指示快速生成了一个vue3+TDesign 初始项目
（4）借助代码助手的知识库，对客服聊天页面样式微调（入口在“引用”那里）
（5）提问：“将上述客服聊天的vue3主页面的样式进一步优化，达到扁平化的页面效果”
（6）按照经过多轮代码微调和优化后，操作方式类似，通过对话+补全组，最终完成页面效果展示如下：
（2）找到核心代码逻辑，复制到编辑器中，触发补全进行代码微调，完成后端api的请求
前言
随着互联网的蓬勃发展，IT领域业务需求变更的速度越来越快，许多中小公司都采用快捷开发的方式来提升开发效率，但是往往真实场景是：客户提出了一个需求，IT服务厂商需要两三天的时间内给出解决方案，这对于人员不变情况下，开发人员来说不仅工作量也加大了，工作强度也提高了，那么随着现在大模型技术的蓬勃发展，有没有一款好的AI编程辅助工具能够帮助到我们开发人员来提升开发效率呢？正好博主最近在研究和学习AIGC，加上也有个政务领域的智能客服的需求需要技术调研， 博主这里刚好了解到腾讯云也推出一款编程助手——【腾讯云 AI 代码助手】，能自动生成代码片段，还能帮助我们快速找到并修复代码中的错误，可以帮助提升开发效率，为我们的项目进度带来了积极的影响。因此，我决定尝试在使用【腾讯云 AI 代码助手】的能力来先开发一个政务智能客服，使用了这款工具后博主不到一天时间就完成了全部开发，非常高效，这里也给大家先看看博主开发的作品成果：
那么这次应用开发的亲身体验下来，博主是在vscode编辑器中集成了腾讯云AI代码助手插件来做开发，它有何优势和便捷之处，以及我是如何来进行【政务智能客服】这款应用的开发呢，且听博主接下来为你娓娓道来~~~
一、技术架构
本项目主要采用以下前沿技术和工具：
- Vue 3 +vite：项目基于 Vue 3 构建，并采用 TS 语法，使组件书写更简洁、代码更加严谨。
- TDesign Vue Next：集成腾讯提供的 TDesign 组件库，实现了对话框、按钮、输入框、弹窗等多种 UI 组件，保证了界面的一致性和良好的用户体验。
- marked：用于解析和渲染大模型返回的Markdown字符串，使得消息中内容能够友好显示。
- Localstorage：用于实现对话记录的本地存储。
- 流式 API 请求：通过 Fetch API 的流式请求与 SSE 技术，实现了聊天机器人实时响应，保证用户体验的流畅性。
- 混元大模型api：对接混元大模型api,为应用提供智能问答服务.
二、功能介绍
以下是项目核心功能的详细介绍:
1、智能回答
与常规输入框不同，本项目将消息输入移至弹窗中，使用大号 textarea 提供更宽敞、便于输入的编辑区域，使得长消息或需要排版的文本内容能够更好呈现。同时
2、对话展示
消息以气泡样式展示，支持 markdown格式文件渲染，用户与系统的对话清晰分隔。每条消息下方附有删除、引用及反馈按钮，方便用户管理和互动。
3、历史对话存储
通过Localstorage本地存储，支持用户将历史问答记录本地存储，便于存档或再次询问。
4、消息反馈
针对每条对话，用户可点赞或点踩，通过反馈组件记录用户对回答满意度，同时可以点击引用按钮快速将消息内容导入输入框继续讨论。方便模型进一步调优
三、腾讯云AI代码助手集成
1、准备好vscode编辑器(建议安装版本 1.84 及以上)，单击前往 VS Code 官网下载。
2、安装插件：
快速安装：如果您已正确安装了 VS Code，单击一键安装腾讯云 AI 代码助手。
从 IDE 插件市场安装：您也可以在 VS Code 插件市场手动搜索 腾讯云 AI 代码助手 并下载安装。
3、点击 右下角 选择 立即登录，跳转到网页进行微信登录
登录成功后跳转回编辑器，就可以使用腾讯云AI代码助手了~
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
