前几天，业务拉了一个大客户，客户需要先看我们做的样本项目（类似于官网首页），然后才会决定是否和我们进一步合作。
作为技术人员，我有幸和老板一同来到客户公司参观，早上和客户简单的沟通后，我们就静静等待下午的演示了。
沟通后，才发现是产品忘了给我说！这下，我们在场的所有人都傻眼了。
老板突然问我，现在做来的及吗？
我愣了一下，说道：我现在没电脑啊（客户演示用他们的大屏）？
业务立马说：我可以给你从客户呢里拿一个用！
我刚想反驳回去，突然想到，如果我解决了这个问题，拿下客户，老板是不是会对我刮目相看？我岂不离升职加薪不远了！
于是，我立即自信的告诉老板：我可以完成！放心交给我吧，2个小时内搞定！
能够这么自信，是因为我前几天发现一个新东西：豆包MarsCode！它提供了编译器的AI编程插件；还提供了一个在线的编译器，免配任何环境，只要有网，开箱即用，非常强大！而且，用它启动的前端服务有一个公网域名，访问非常方便，还非常快！完全满足我的需求！
开发之前，我先简单的介绍下豆包MarsCode。官网是这么说的：
豆包MarsCode为你提供了编程助手和IDE来协助你完成编程任务。
简单来说，就是vscode或者IDEA中的一个插件，功能和ChatGpt一样，比文心一言强不少！
我们的项目使用的是vue3，它完全符合我的要求！
我们的项目是存在git仓库里的，因此我不需要使用豆包创建一个vue的模板，直接导入我们的仓库代码到豆包里即可！
但是，非常难受，上面的代码没有公司的私有仓库代码！只有我git上的一些公开仓库。
豆包官方是这么解释的：
豆包MarsCodeIDE不支持使用私人仓库。若填入私人仓库的URL，输入框下方会提示”此代码仓库为私有仓库或无效地址，请检查“。
所以，为了方便代码的导入，如果允许，我们可以将仓库设置为公开。
作为一个聪明的开发，私有仓库的导入都不是问题！豆包的在线编译器是有命令行控制台的，我们可以使用命令行拉取私有仓库代码！
模板创建完毕后，这些模板文件我们都可以删除，我们使用git拉取的代码即可。
首先，我们需要在gitee上找到私有仓库的HTTPS链接
然后在豆包的IDE中点击右下角的按钮打开控制台
豆包的node环境默认比较高，是v20.14.8版本，我们的项目node版本只有16，如果使用高版本node下载依赖，可能会导致项目运行异常。因此，保险起见，安装依赖前，需要切换下node环境。
传统的切换node非常麻烦，需要配置环境或者安装插件。非常人性化的是，豆包内置了nvm工具，切换node十分丝滑！
我们先下载指定版本的node
nvminstall16.14.2然后切换node版本
相比于本地网络，豆包的云下载速度非常快！
node环境切换好后，我们就可以安装依赖运行项目了！
和本地开发不同，我们并不用切换npm镜像源，豆包IDE已经帮我们处理了这些繁琐的操作，我们直接使用npmi安装依赖即可！
可以看到，即使我本地网速不好，使用豆包IDE下载依赖却用时不到5S，这一点简直吊锤本地依赖下载啊（不配置镜像源的情况下）！网速不好同学的福音啊！
同vscode一样，我们可以直接在命令行输入指令运行项目
npmrundev或者使用点击豆包IDE的一键运行按钮
这个按钮实际上执行的是npmrunstart命令。因此，我们的packge.josn中的命令最好配置成npmrunstart。
项目运行成功后，我们就会在右侧看到项目的效果。
点击小眼睛按钮（webview）也可以手动查看代码效果。
复制项目的链接，直接在浏览器打开！
甚至，我只是不是可以把这个当一个临时服务器域名进行网页访问？还要什么tomcat和nginx，我就喜欢简单粗暴的东西！
工欲善其事，必先利其器！开发代码前，怎么能不能安装一些提高开发效率的插件呢！
同vscode一样，豆包IDEA可以使用下载vscode的插件（个别的不行）！这一点着实让我惊讶，非常牛逼！
豆包IDE是默认提供git管理工具的，但我觉得不好用。我的git管理一般用Gitgraph，可以查看代码提交历史，进行一些列操作，最重要的时免费好用！
我们点击豆包的拓展插件按钮，搜索Gitgraph然后下载即可
安装好后，点击对应图标我们就可以看到对应的代码提交历史了。
这个插件主要是检查单词拼写的，如果拼写错误，会给出提示。没办法，咱英语不好，需要一个这样的辅助插件。
在正式开发前，我们还需要测试一下git是否能用。不然我辛辛苦苦开发完的代码最后不能推送到仓库，我岂不赔了夫人有折兵！
按照要添加的功能（轮播图组件），我先创建一个Banner文件夹提交到仓库试试吧。
创建完文件后，豆包的git就会实时显示编辑更改后的文件。
但很可惜，此时并不能提交代码。豆包官网解释如下：
豆包MarsCodeIDE默认已集成Git，你可以在IDE中进行Git操作，提高开发效率。
配置Git的用户信息
gitconfig--globaluser.name"yourusername"gitconfig--globaluser.email"youremail"终端中运行以下命令生成SSH密钥
按照操作，点击三次回车键出现如下界面即可生成秘钥。
生成秘钥后，我们查看生成的SSH公钥和私钥：
ls~/.ssh/如图，有.pub的就是公钥
我们使用下面的命令读取公钥并复制
最后，我们在git上进行配置即可
配置成功后，我们就可以愉快的推送和拉取代码了！
如图，按照客户的意思，无非就是开发一个轮播图组件，轮播图的每页有21张图片（按照三行七列排布），点击切换按钮可以切换轮播图。
这很容易，我们先维护一个数组，用于储存图片的资源，类似这样：
constlist=ref([{name:"",src:"/assets/img/pic1.png",id:1},{name:"",src:"/assets/img/pic2.png",id:2},//....])然后，我们需要一个值用于储存选中页
constselectPage=ref(1)最后，根据不同的选中页，渲染不同的列表即可
生成完成后，我们点击【Aceept】按钮即可。
按照刚才的开发思路，我们先把代码的基础样式，功能完善一下。
首先是图片资源，这个好弄，我让UX切好图直接发我了，名称也是让她按照数字命名的，方便调用。
然后，我需要完善这个list列表，手写是不存在的，我们直接借助豆包AI补全吧！
这个生成结果还凑活，我们稍微改造一下数组吧。
很尴尬，图片都没有加载成功。这也正常，在vite项目里，动态图片的加载是有专门的方法的。忘了怎么写，我用豆包AI生成一下吧。
ok，再改造一下我们的代码
现在，只要完善一下轮播的切换按钮就可以了。
切换按钮无非就是几个span元素，选中span的添加单独的类名控制样式即可，span的数量用总的图片数量除以21向上取整即可，那它的实现也非常容易。
秉持着一个优秀的程序员必须写注释的原则，我决定给我的代码写上注释，但要用AI生成（正经程序员谁自己写注释啊！）
选中代码，点击豆包的DOC按钮
很快啊，这个注释就生成完毕了，我们点击图中绿色的yes按钮就可以应用注释了！干净卫生啊兄弟们！
不得不说，AI写代码，就是快啊！
此时，离中午吃饭还剩半个小，还好，差点耽误我吃饭了！
开完后，我复制出了项目的在线链接，然后直接甩给老板钉钉，然后特意钉他！
很快，老板立马过来就激动的问我：你开发完了？这么快！
是的，我斩钉截铁的说！
老板突然用手拍了我三下，说：小伙子，干的不错！
下午2点，我们成功的进行了项目演示，客户也比较满意！
回到公司，老板把我的事情讲给了同事们听，同事们都很惊讶，为啥我用客户的电脑还能这么快完成需求开发？
我只是淡淡一笑：豆包！
大家很疑惑，豆沙包这啥东西！
不管怎么样，这次，也是借助豆包MarsCode顺利的完成了紧急任务，也让我对AI工具有了新的认识！最后，领导在会上也承诺给我发500的现金奖励，用来表彰我本次的表现！
实际开发中，我们可能也很少会使用豆包IDE进行项目开发，有些人可能会问豆包云IDE对于我们普通用户的意义。笔者认为，对我们普通用户来说，它最大的用途就是可以十分方便的运行个的demo，查看效果。
但借助豆包，我们可以一键创建好模板，立即就可以把demo粘贴进行效果查看，极大的方便了我们学习！
因此，笔者认为，豆包IDE对我们而言是一个非常好的学习工具，合理运用，能极大的提升我们的学习效率与质量！
最后，笔者提出自己对豆包MarsCode的一些看法。
豆包的在线IDE着实是让人眼前一亮的东西，虽然笔者只使用了VSCODE，但总体体验非常好，和本地开发几乎没有什么区别！也没有什么学习成本。
优点
缺点
和绝大部分类似产品如通义千问和文心一言而言，他们的使用方法基本一致的，属于有手就行。
总的来说，豆包MarsCode是一款非常优秀的产品，足够让人眼前一亮，相信大家使用后，也会深深的被这一款优秀的工具吸引。虽然现在它还有很多不足，但我相信，随着用户的增多，官方也会持续优化，一定会把产品打磨的更加好用！期待！
希望国产工具能做的越来越好！也希望AI产品能给我打工的我们带来更多真正有用的益处！