你不可不知的腾讯混元大模型前端开发实战技巧

你不可不知的腾讯混元大模型开发实战技

前言

大家好，我是喵喵侠，是一名前端开发。在日常开发的过程中，我经常会遇到各种问题，以往最常见的解决方式是借助搜索引擎，来寻找问题的解决办法。这种方式虽然大部分情况下能解决问题，但搜索和筛选还是需要花费不少精力的，搜索关键词不对，还得反复尝试。现在有腾讯混元大模型就方便多了，你能够通过自然语言描述，向大模型表达你的问题和需求，随后等待片刻，就能得到你想要的答案，这样就节省了大量搜索的时间，十分方便。我会在本篇文章中，先为大家介绍腾讯混元大模型的能力，然后按照我的平日的使用习惯，分享我之前的提问案例，最后会带来一个完整的开发实战小项目，相信看完本文的你一定会有所收获。

腾讯混元大模型介绍

我们先来听听官方自己的介绍：

官方的介绍比较正式，介绍了核心的优势和特点。用大白话来说，就是一个智能助手，你可以跟他进行对话，向它提问，它会给你想要的答案；与此同时，你可以让他帮你完成创作、分析和建议等类型的工作，让你的工作效率大幅度提升。

总之无论你有什么要求，他都能够尽可能的满足你，尽可能给出专业且全面的回答。

了解了腾讯混元大模型是什么，可以做什么，接下来就可以进入我们的提问环节了。

提问环节

在日常开发中，免不了遇到这样那样的问题，如果有什么问题，可以直接丢给一个智能助理就好了！而腾讯混元助手正好就具备这个能力，来看看我是怎么使用的吧。通过下面的一些问题，你能够很快的掌握提问的精髓，能切实体会到可以问哪些问题，可以解决哪些问题。

问题 1：element ui table组件 column 列内容填充

背景：有段时间需要开发大量页面，每个页面都会到 element-ui 的 el-table，每个表格的列配置不一样，但是格式都是类似的数组对象，于是我显示告诉腾讯混元助手，上面哪些是我需要的列，然后要把这些数据填充到下面的哪个模板里。

完整对话如下：

点评：我的描述比较简单，上下两部分用分割线分割。即便如此，它还是能很快的意会到我想要表达的意思，并且给出完整的代码，并且还告诉我有两项是不存在的，所以删掉了，做的非常好！

问题 2：element ui tree 组件如何保持节点选中高亮状态

背景：效果是这样的，比方说 el-tree 这个组件，有一个节点 A，我单击选中了这个节点，节点背景会高亮，但我鼠标点击除了 tree 之外的区域后，这个高亮状态会被取消掉。我希望的是能够一直保持节点背景高亮状态，除非我选中了其他节点，否则这个高亮是不会因为我点击了其他位置而消失的。

完整对话如下：

点评：可以看出，混元给出的答案非常正确，加了一个属性就好了。尽管我的问题非常简短，但它还是考虑到了存在同时需要展开和高亮这样的场景，所以就有了第二点的如果，这也是一个比较常见的用法，这样的需求也是存在的，这里补充的很好。

问题 3：element ui textarea 如何设置默认行？

背景：textarea是一个常见的组件，用于多行文本输入，多见于表单中。有时候这个内容的长度是固定的，比方说限制 150 字，这样就能大概知道需要多少行；或者是为了页面排版的美观，设置一个行数，让输入多行文字内容的体验更好。

完整对话如下：

点评：这里我忘记了具体是哪个属性是设置行数的，其实通过查文档也能得到答案，只不过问混元大模型来的更快，一个鲜活的 demo，胜过枯燥的文档。

问题 4：生成一个 Vue3 项目的 .gitignore 文件

背景：我新建的一个 Vue3 项目，想上传到远程仓库，但需要排除一些不需要上传的文件和文件夹，因此需要一个.gitignore 文件。

完整对话如下：

点评：之前不小心把 macOS 的隐藏目录传上去了，我在描述里面特意强调了这一点，混元助手给出的结果很好，把这个给排除在外了，也把常见的 vscode 配置文件等也排除在外。这些基本可以满足需求。

问题 5：element ui form 表单 rules 怎么写？

背景：form 是一个常见的组件，表单项校验用的也很多，不正确的书写，会导致校验规则不生效，所以需要有正确的示例参考。

完整对话如下：

点评：可以看到回答还是很全面的，写法正确，要是能够把“el-form-item 的 prop 和form 的 key 必填且必须得保持一致”这一点能够说明一下，就更好了。

问题 6：element ui 级联选择器如何修改 input 的值

背景：选中一个项目会自动选中当前这项的 label，但如果要回显就麻烦一些，需要替换掉默认的 input 显示，假装被选中。

完整对话如下：

点评：这个对话我用了两轮，第一次对话没有达到我的预期，我在第二次对话限定了解决条件，然后给出了我想要的答案。这里的上下文理解还不错，还能记得我之前的对话。

问题 7：Javascrpit 数组指定位置插入新数据

背景：有时候记不住方法，就可以直接问混元助手。

完整对话如下：

点评：不光给出了答案，还在注释里补充了输出结果，一目了然。

问题 8：echarts柱状图y轴数值加单位

背景：echarts是一个常见的 js 图表框架，里面有非常多的配置项和 API，有时候找一个配置反文档要找半天，也不知道怎么去实现想要的效果，这时候混元助手的优势就发挥出来了。

完整对话如下：

点评：结果显而易见，要点是yAxisx加上 formmater，完整的示例配置生成后，可以直接拿过来用。

问题 9：jQuery 修改某个标签属性值

背景：jQuery 是一个比较老的前端库，但还是有很多旧的网站还在用它，长时间不用难免会遗忘。

完整对话如下：

点评：回答的不错，先是要等页面加载完毕，然后获取元素，进行修改属性操作。

问题 10：echarts 堆叠柱状图改成堆叠条形图

背景：echart 图表在前端开发中用的很多，有很多图的配置是类似的，只有些许区别。通过混元助手可以根据现有配置，生成新配置。

完整对话如下：

点评：主要是x 和 y 轴的互换，生成的新结果一目了然，可以直接拿过来用。

问题 11：根据语境进行数据填充

背景：有时候需要造一些模拟数据，方便前端页面展示，这时候可以用混元助手，根据上下文来生成。

完整对话如下：

点评：可以看到，空白的 value 都被填充了，而且含义跟前面的 name 一一对应，表现很不错。

问题 12：根据要求生成 el-form 表单

背景：element-ui 的 form 表单通常写起来比较繁琐，需要写标签，还得写对应的变量和校验规则，这样的工作混元助手完全可以胜任，看看我是怎么描述的吧。

完整对话如下：

点评：我把的需要的内容，以换行的方式描述，每一行代表一个表单元素，最后做了一些要求补充，包括 prop 和 placeholder 这些。最后得出的回答很不错，methods 里面还加入了表单提交验证和重置表单的操作，这样的表单算是写完整了。

Chrome 插件实战开发

案例背景与需求介绍

很早之前我都想学一下怎么写一款属于自己的Chrome插件，毕竟Chrome是每天使用最多的软件之一，每天无论是日常开发，还是浏览网页，都会用到它。而Chrome插件可以在Chrome浏览器的基础上，拓展很多原本没有的功能，这个特性让我非常喜欢，我本人也装了很多插件。这次我想借助腾讯混元大模型，来帮我开发一款简单的Chrome工具插件，这款插件的名字就叫做「复制markdown标题」，功能与「Copy as Markdown」这款插件。下面让我们一起开始吧！

既然要开发Chrome插件，我只需要把我的需求清晰准确的告诉混元大模型，然后等它解答就可以了。

首先我来整理下思路，我的这款「复制markdown标题」Chrome插件，核心功能有两个：

1. 复制当前选中激活的标签页URL为Markdown格式

2. 复制所有打开标签页URL为Markdown格式

操作方式是：

1. 点击插件图标，出现下拉菜单。点击「复制当前标签页标题」，则把单条Markdown格式的标题写入到剪切板。

2. 点击插件图标，出现下拉菜单。点击「复制所有标签页标题」，则把多条Markdown格式的标题写入到剪切板。

作为一个没有开发过Chrome插件的开发者来说，大致要解决以下4个问题：

1. 如何搭建Chrome插件项目目录？

2. 如何获取当前标签页和所有打开的标签页的title和url？

3. 如何把拿到的title和url，处理成Markdown的格式？

4. 如何把Markdown的格式的数据，写入到剪切板？

开发步骤

既然要开发Chrome插件，我只需要把我的需求清晰准确的告诉混元大模型，然后等它解答就可以了。

首先我来整理下思路，我的这款「复制markdown标题」Chrome插件，核心功能有两个：

1. 复制当前选中激活的标签页URL为Markdown格式

2. 复制所有打开标签页URL为Markdown格式

操作方式是：

1. 点击插件图标，出现下拉菜单。点击「复制当前标签页标题」，则把单条Markdown格式的标题写入到剪切板。

2. 点击插件图标，出现下拉菜单。点击「复制所有标签页标题」，则把多条Markdown格式的标题写入到剪切板。

作为一个没有开发过Chrome插件的开发者来说，大致要解决以下4个问题：

1. 如何搭建Chrome插件项目目录？

2. 如何获取当前标签页和所有打开的标签页的title和url？

3. 如何把拿到的title和url，处理成Markdown的格式？

4. 如何把Markdown的格式的数据，写入到剪切板？

带着这些需求和疑问，我向腾讯混元大模型发起了第一次提问：

我想开发一款Chrome插件，插件名称是「复制markdown标题」。功能是点击插件图表，出现一个下拉菜单小窗口，里面有两个选项，名称分别是「复制当前标签页」和「复制所有标签页」。「复制当前标签页」是复制当前页面的title和url为Markdown格式，「复制所有标签页」同理。请帮我完成这个插件的开发。

随后腾讯混元大模型开始疯狂输出：

内容大致如下（去掉代码部分）：

1.创建一个文件夹作为你的插件根目录，例如：markdown-title-copy。

2.在该文件夹下创建 manifest.json 文件来定义你的插件。

3.创建一个新的 HTML 文件，例如 popup.html，用于创建下拉菜单小窗口。

4.在 popup.html 文件中添加以下代码，创建一个下拉菜单小窗口：

5.创建一个 popup.js 文件，用于处理点击图标后打开的插件窗口。

6.在 popup.js 文件中添加以下代码，用于处理点击图标后打开的插件窗口：

7.创建一个 content.js 文件，用于与插件窗口通信。

8.在 content.js 文件中添加以下代码，用于与插件窗口通信：

9.在 manifest.json 文件中添加以下代码，用于插件设置：

10.创建一个 options.html 文件，用于插件设置页面。

11.创建一个 icon.png 文件，用于插件图标。

12.将所有文件放入 markdown-title-copy 文件夹中。

13.在 Chrome 浏览器中，打开 chrome://extensions/ 页面，启用开发者模式。

14.点击 加载已解压的扩展程序，选择 markdown-title-copy 文件夹，完成插件安装。

15. 在浏览器右上角找到插件图标，点击它，选择复制类型，点击复制按钮，即可复制当前标签页或所有标签页的标题和链接。

可以看出，混元大模型给出的解答是循序渐进的，可操作性强。由于代码内容过长，混元大模型在第11点的时候，中断了一次：

不过没关系，我后面补充了下面对话，让内容变得完整：

你回答的很好，刚刚第11条在 options.html 文件中添加以下代码，用于设置插件选项，你没有说完，请接着说

从上图可以看到，它真的是在从上一次断开的位置开始补充，直到完整的结束。

我用工具测试了下，第一段对话结果返回了3079个字符，这个应该就是单次对话的上限了。

好在混元大模型能够记住上下文，能够完美衔接，这一点非常赞！

接下来我只需要按照它说的，一步步做就好了。

我一步步按照要求来做，创建文件目录，创建文件，粘贴内容到文件并保存。图标没有，就去iconfont上找了这个图标，感觉很符合我这款插件。

在粘贴文件的时候，发现vscode有提示报错，是popup.html这个文件，有两处报错：

在方法里面传参字符串没问题，可字符串里面写js语句属实有些奇怪。

再来看看写的按钮，发现它理解错了我的意思，它误以为我是单纯的点一个按钮复制标题，点一个按钮复制url，而不是复制的内容，就是一个完整的Markdown格式的url。

意识到这个问题后，我针对这一点，重新梳理了下我的描述，让混元大模型给我修正后的回答。

你的第4点回答有误，你的html代码第37行有报错，copyToClipboard这个方法里面不应该写js语句。另外你理解错了我的要求，我要的是点击按钮，复制当前标签页的Markdown格式的url，例如：[腾讯云 产业智变·云启未来 - 腾讯](https://cloud.tencent.com/) 这样的，点击按钮后，我希望的结果是，我在任意文本框粘贴，都是类似 [腾讯云 产业智变·云启未来 - 腾讯](https://cloud.tencent.com/) 这种格式的Markdown链接

不知道是不是网站抽风过一次的原因，之前回到页面出现了错误代码，我是刷新页面后继续对话，它好像有些记不清之前说过什么，只记得最近一次回复的options.html这个文件。后面自然是答非所问。

从结果来看，再继续描述下去，只会越描越黑，第一次的尝试，算是失败了。后面经过了多次尝试后，发现混元对较为复杂的开发任务，还是不太擅长，也可能是没有针对 Chrome 开发这块做专项训练导致。不过没关系，我们依然可以借助混元大模型来答疑解惑，结合自己查资料，完成本次开发目标。

我在腾讯云开发者社区，找到了下面这篇文章，里面介绍比较全面，很不错：

[全网最详细的谷歌插件开发小册📚-腾讯云开发者社区-腾讯云](https://cloud.tencent.com/developer/article/2305250?areaId=106001)

首先我看了下前半部分，顺着介绍，创建了以下目录结构：

这里把manifest.json做下修改，匹配任意网址，修改后写法是混元大模型提供的，后面还给出了建议。

其余文件内容跟文章中一样，先让插件能正常加载运行再说，运行效果如下：

我给popup.html文件，加了一个button按钮，文字是「获取当前标签页md标题

」，结果乱码了。

来问下混元大模型怎么回事：

原来是编码问题，直接复制的代码，忘记加head标签里面的meta了，加上就好了。

由于之前是用的谷歌首页测试，现在要匹配任意网站，所以我让混元大模型告诉我怎么改，把matches改成"<all_urls>"就可以了。

接着我看了这篇文章，对content.js、background.js、popup.js之间的通信，有了一个浅显的了解。

[入门系列3 - background、content、popup的通信 - 掘金](https://juejin.cn/post/6844903985711677453)

大概知道的是，popup.js可以写点击事件，传递给content.js，而content.js可以获取到当前页面的dom元素，这样我就可以获取到当前页面的title和url，实现第一个功能；background.js则可以拿到所有的标签页信息，也就可以用来实现第二个功能。

所以我的通信思路是：

1. popup.js点击第一个按钮，发送消息给content.js，content.js接受消息后，判断消息内容是第一个按钮发送过来的，用document.title和window.location.href分别获取标题和链接。

2. 还是popup.js，点击第二个按钮，发送消息给content.js，然后根据对应的action，进入第二个条件，向background.js发送消息，background.js接受消息后，获取所有tabs，然后遍历tabs的title和url为一个数组，返回给content.js

3. 无论是第1步还是第2步，最终的写入剪切板的操作，都在content.js中完成。这里我让混元大模型给我写了一个写入剪切板的方法，亲测可用。

关于第二点，我不太清楚具体用什么API来实现通信，于是交给了混元大模型。

我的提问是：

content.js发送一个指定消息给background.js，background.js接受消息后，获取所有tab页面的title和url，返回给content.js，怎么写

得到的结果让人有些迷糊，因为1和3都是写的content.js，但两者的写法不太一样。按照我的理解，应该是3是更新后的1。

追问它，它开始胡言乱语了，前言不搭后语：

但我还是按照它说的做了，结果出现了报错：

The message port closed before a response was received

这个问题我搜了几篇文章，还是没有找到问题的根源。无奈之下，我求助了GPT4，描述了同样的需求。

用GPT4的代码，果然就成功了，发现它不一样的地方在于，在background里面，加了return true，另外sendResponse是写在了chrome.tabs.query的外面，关键点原来在这里！

这样核心的逻辑都实现了，剩下的处理为md格式就简单了，拼接下字符串就好。

经过了一番折腾后，我终于完成了这款「复制markdown标题」插件的开发。

源码我放在Github上了，写的有点乱，感兴趣的朋友可以看看：

https://gitee.com/cooper1x/copy-as-md

实现效果与展示

插件效果截图如下：

1. 获取当前标签页md标题

点击写入了剪切板，粘贴就能看到md格式的url。

2. 获取所有标签页md标题

结语

关于提问，总体来说体验还是不错的，混元助手的优势在于对常见问题的解答又快又准确。我在文中放的基本都是成功的案例，能够很好的帮助我完成开发目标。在实际体验中，也存在部分场景无法理解我描述的情况，表现的不是很好。不过每隔一段时间，混元的能力就会有所加强，这个在长期使用中能够明显感觉到。

关于 Chrome 插件开发，原本对腾讯混元大模型抱有很大的期待，没想到中途磕磕绊绊，出现了不少问题，无奈之下还的求助搜索引擎和GPT4。就目前看来，腾讯混元大模型对比较专业的技术知识还有所欠缺，专业性和准确度等方便还有待提升。另外我发现大模型的训练语料库不是很新，目前是2023年，Chrome官方开始有逐步废弃v2版本插件的意思，建议开发者使用v3版本，而混元给出的回答都是基于v2的版本，目前网上大多数文章也是基于v2 版本，希望后续能够更新知识。我的感受是混元大模型的强项还是针对单个具体的问题做回答，比方说我那个单一的写入剪切板的功能，这个就没问题，可以直接拿过来用。我希望未来的腾讯混元大模型，可以量身定制学习计划和目标，帮助新手快速掌握Chrome插件开发技术，能够针对具体的问题，给出正确且详细的解答。

总的来说，腾讯混元助手能够提高开发效率，直出式的回答可以快速给出你想要的结果，这比传统搜索来说简直不要太方便。只是在特定场景下的能力，无论是专业性还是准确度还有待增强，相信目前的缺陷只是时间问题。我会继续使用腾讯混元助手，期待未来腾讯混元助手能够有更好的表现！