【腾讯云 Cloud studio 实战训练营】开发一个基于Vue的开心消消乐

【腾讯云 Cloud studio 实战训练营】开发一个基于Vue的开心消消乐

---

前言

哇咔呀！各位开发兄弟，今天让我来给你们科普科普 IDE 开发史！为什么要讲这个呢？接着往下看就知道了！！

还记得我们曾经是怎么样编写代码的吗，一个一个打字输入行行代码，那时候也没现在这么智能化，能自动解析依赖什么。后来开发出IDE，引导自动补全之类功能，可算解决我们编码效率的难题了。

之后IDE功能越来越强大，比如慢慢有了直接在ide中debug和通过ide进行版本管理。可是我们的开发场所还是局限在本机,一旦电脑出问题就GG了！

时移今日，随着云计算兴起，"云端开发"这一概念相继来袭。这其中最吸引我的,就是基于浏览器的云IDE啦~

正所谓 “知音难寻” ，最近老哥遇到一个新产品，叫Cloud Studio！它可以说是目前功能最强大的云IDE了。

为什么这么说呢，首先Cloud Studio是真正免安装的，浏览器一打开就能开开心心写代码。同时它集成了我们经常使用的各种IDE功能，比如自动补全、实时调试什么的都很香。

最重要的是，划重点 ！Cloud Studio 把我们的开发场所 “云” 上去啦！不再受任何一台设备限制，任何时候任何地点，打开浏览器就可以开工赚窝囊费了！

一、Cloud studio简介

所谓IDE，就是我们的集成开发环境，是软件开发人员在他们用于编程的计算机本地安装的应用程序。随着计算机编程语言从第一代机器语言，从0/1二进制编码、第二代汇编语言，英文助记符号，发展到第三代高级语言，更加贴近人类的自然语言；编程的方式也从最原始的控制寄存器的位移，内存地址，汇编命令，一直发展到高级语言，只需告诉计算机“干什么”，而不需要告诉计算机“怎么做”的过程编程模式；

到了近代，更进一步发展为面向对象的编程模式，编程的过程也更加贴近人类描述和解决自然问题的方式；编程所控制和调动的底层资源也发生了翻天覆地的变化，从早期的大型主机、个人电脑PC机、服务器单机、服务器集群资源，到今天的云计算IaaS，PaaS，甚至SaaS资源和能力。

IDE也从最原始的文本编辑器，发展到包括代码调试器，编译器和丰富的图形用户界面（GUI）等等高级功能的工具集。背后驱动IDE发展和进化的并不是IDE技术本身，而是围绕编程的上下游技术、编程的方式以及可调动的底层资源等多维度的因素共同作用的结果。

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。

Cloud Studio 作为在线 IDE，包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。

二、使用步骤

1.登录注册

使用腾讯云Cloud Studio，首先需要进行注册。进入腾讯云官网，可以看到有三种注册方式

• 使用CODING账号注册
• 使用微信授权注册
• 使用GitHub授权注册

每种注册授权都非常简单方便

注册成功后，即可进入以下开发面板

通过设置可以进行git、和公钥等查看
这个ssh公钥可以将cloud studio的放到我们的个人仓库的公钥列表，然后就可以让我们在 cloud studio内推拉代码里

如果你觉得git访问太慢啦，还可以通过git代理进行配置。

然后在个人设置中还能配置关联账号，这样就不怕我们的账号丢失了。

这里还有个有意思的，如果你想让你的所有项目都能访问到一个值，你可以通过设置环境变量，让所有的空间都通过环境变量进行获取，这样就不用每个空间都进行操作了。

2. 构建开心消息乐

首先，我们在git上找好了一个仓库，是一个基于 Vue3 开发的消消乐小游戏，其仓库地址如下：https://github.com/wmuhua/vue3-xxl.git

这个项目呢，是vue3 和 typescript + vite进行开发的，特别适合刚刚学习的小伙伴，然后上面还有体验地址，未来确保项目是正常运行的，我先访问了一下体验地址，但是就不给兄弟们截图了，大家看自行去研究一下，哈哈！

2.1 新建vue空间

这里代码来源直接使用仓库地址，他会自己拉取代码，然后用这个代码放到空间中

空间创建好后大概是这个样子：

2.2 安装环境依赖

这里还是通过 npm 进行依赖安装，让我们为整个项目的运行先打下基础

到这里项目环境大致就ok了，然后我们开始运行预览项目

2.3 运行预览

通过运行

npm run dev

他会自动弹出是否要预览，这里正常预览就好了，大致页面如下

为了保证程序能够正常在云ide环境中执行，我们开始玩一把试试，看看环境是否能够直接兼容

最终还是成功拿下！！

总结

云端开发环境的优点体现在于：

• 分布式敏捷性：云端开发环境允许开发者在任何地点任何时间进行开发测试，不受地域和时差限制。
• 弹性算力：云端开发环境提供强大的计算和储存力量可以动态升级，让开发者更轻松高效地编写和部署代码。
• 团队协作：云端开发环境支持多人协同开发，帮助技术团队更高效地完成研发任务。
• 弹性部署：云端开发环境提供灵活多变的部署渠道，帮助开发者轻松将产品推送到不同环境。
• 全方位安全：云端开发环境全面保障安全，包括防火墙、数据备份、安全监测等，有效保护开发者的信息和作品。

通过这次实践体验腾讯云 Cloud Studio 后，我发现它是一个非常强大且易于使用的代码开发平台。它上面有非常多的开发模板，这使得我们可以轻松地选择我最熟悉或最适合我的需求的语言或环境来构建、训练和部署应用程序，不仅如此，它还能动态进行配置升降，让我们无需考虑配置的问题。

相信以 Cloud Studio 的不断更新，将来必定给我们开发者带来超级丝滑的使用体验。所以我高强度地推荐各位尝试使用这个神器~体验一下真的开发的乐趣，你还不感觉冲起来？