【腾讯云 Cloud Studio 实战训练营】使用在线编程的方式用Nuxt3开发一个后台管理系统（附源码）
原创
前言
大家好，我是刘明，开源技术爱好者，十年创业老兵。
CSDN近期联合腾讯云、Coding、CloudStudio组织了【腾讯云Cloud Studio实战训练营活动】，苦于前些日子一直在备考注册会计师，没有很好的体验Cloud Studio的云IDE产品。现在考试结束了，体验了一把云IDE,不禁感慨云端开发原来可以这么爽。
为了避免大家看长文没有耐心，先说结论：CloudStudio的云端开发比本地开发效率高，尤其适合团队协作。
大家如果感兴趣，可以查看我在CloudStudio上开发的后台管理系统开源项目Nuxt3-Pro，点击右上角【复刻】按钮或者【绿色播放】按钮，可以在CloudStudio环境中一键运行，免去了本地的环境安装、依赖安装等繁琐步骤。
推荐链接
该代码正在参加优秀代码评选，希望大家能都多多点击【复刻】按钮或者【绿色播放】按钮，好给这个项目添加人气。
Cloud Studio介绍
Cloud Studio是腾讯云旗下的项目，主打在线编程，已经支持C/C++/C#/Java/JavaScript/Go/R/Rust/Python等主流语言。
推荐链接
在线编程概念很早就有，但是想做好并不容易。CloudStudio这次推出的在线编程产品，其实是一个云端的VS Code,熟悉的界面可以让开发者快速适应。这个云端VS Code，不仅可以安装所有的VS Code插件，而且运行速度极快。一个云端产品能做到这样，技术上是值得称赞的。
除了有本地VS Code的所有功能外，CloudStudio还新增加了很多提高开发效率的云端功能，比如多人协作、云端部署、实时预览等功能。
看下图，即可知道CloudStudio的多人协作是多么强大。
CloudStudio的一些开发技巧
添加SSH公钥
往Gitee或者Github上推送代码，需要进行身份认证。频繁的推送，每次都要输入账号密码，显然是很不爽的。所以成熟的开发者都会使用SSH公钥避免手动认证。CloudStudio也提供了类似功能，只需要在个人设置页面，找到公钥并复制，然后添加到对应代码托管平台上，后续开发便可以大大提高推送和拉取代码的效率。
CloudStudio文章中提供了添加SSH公钥的教程，大家可以参考。
在线预览调试
在线预览调试是一个王炸级别的功能，不仅可以实施预览，还可以将生成的链接发给同事或者合作伙伴，让对方也可以看到预览页面。如果想要启用CloudStudio的在线预览调试功能，需要在源码根目录添加一个.vscode文件夹，并且添加preview.yml文件。之后每次打开该项目，CloudStudio会自动安装依赖并打开预览页面，简直不要太爽。
关于preview.yml文件的各项配置，大家可以参考Nuxt3-Pro中的的写法，其中都有注释。
连接到云服务器
CloudStudio可以连接到云服务器，利用云服务器的基础环境进行开发。个人认为，这也是一个王炸功能，不过我还没有体验。操作过程很简单，将CloudStudio SSH公钥添加到云服务器上，即可连接到云服务器。具体操作步骤可以参考官方文档。
自定义模板
当个人或者团队经常开发项目时，一个基础模板既能减少配置工作，也能提高工作效率。我们的团队就有很多这样的基础模板，一直以来的做法都是将其存储到代码托管平台，开始一个新项目时直接拉取。
CloudStudio也提供了这样的功能。将模板添加到CloudStudio后，使用起来更加便捷。基于模板开发项目，会变的更加丝滑。具体操作步骤可以参考官方文档。
开启MetaWork协作
MetaWork协作可以让开发人员之间的工作能够通过音视频和留言互助联动，使开发工作更具沟通便捷性与高效性。这个功能应该是CloudStudio最大的收费点，确实可以让远程协作开发变的跟面对面一样。因为我们团队目前是在一起办公，暂时还不需要，所以目前价格我也没有了解。对于经常异地办公需要远程协作开发的团队，这个功能是开发利器。
现在注册赠送免费时长
目前CloudStudio正处于推广阶段，注册即送3000分钟免费时长。开发人员可以抓住这个福利，感受一下云端开发在线编程带来的高效丝滑。也可以利用这个计划，申请一下CloudStudio的AI代码助手。
开发后台管理系统
假设有这样一个产品内容系统：部分页面涉及产品介绍，需要SEO优化，其余页面都是管理系统，需要用户登录，不需要SEO。Nuxt3可以做到部分页面服务端渲染，部分页面浏览器渲染。Nuxt3非常灵活，且开发效率高。所以我喜欢用Nuxt3来开发系统。
这次开发后台管理系统，UI选择Element-Plus，主要是因为element在Vue生态圈一直给人成熟稳定，使用人数多的印象。CSS选择TailwindCSS，也是因为样式丰富，开发效率高。
值得一提的是，Nuxt3官网模块里，有开箱即用的Element-Plus模块和TailwindCSS模块，比自己从0开始进行整合要高效很多。
这次利用CloudStudio开发的这个后台管理系统，我将其命名为**Nuxt3-Pro**.这次开发是对CloudStudio在线编程的一次尝试，也是对平时工作的一个小小总结，将代码开源，希望能帮助到正在学习Nuxt3的朋友们，也是向大家推荐CloudStudio的在线编程工具。
推荐链接
总结
CloudStudio的在线编程，能解决开发人员的很多痛点。比如一台临时电脑，没有安装开发环境，这时就可以使用CloudStudio进行在线编程，比自己痛苦的安装各种依赖要节省很多时间。
CloudStudio的最大价值，在于提高开发效率。我打算接下来在自己的小公司内部推广使用CloudStudio，主要是考虑到以下两点：
- 协作开发，实时预览，比每个人在本地电脑开发然后推送代码，要高效很多；
- 权限控制，可以有效防止源码外泄，尤其是使用临时开发人员时，这个风险很大的
在后端开发上，我们公司使用的是PHP和Java,PHP比例更大一些。目前CloudStudio还不支持PHP，这一点有些遗憾，如果能尽快补上对PHP的支持，我也会尽快尝试，如果能提高协作开发效率，也会尽快在公司内部推广。
如果大家对CloudStudio在线编程或者Nuxt3-Pro源码有任何问题和想法，欢迎随时私信。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
