【玩转 Cloud Studio之Vue3 抢先体验】

前言

第一次接触《Cloud Studio》还是通过微信群里 “腾云先锋（TDP）反馈交流群”，充满好奇心的我看到这个东西决定还是先了解了解，

Cloud Studio 优点

看了官网介绍主要有以下优点

1.全功能，无需下载安装，随时随地开发编码，拥有媲美本地 IDE 的流畅编码体验。

2.多环境，内置 Node.js、Java、Python 等常见环境，也可以连接到云主机进行资源管理。

3.在线预览，快速生成预览链接，方便分享他人展示项目或在线调试。

4.兼容 VS Code 插件，默认的配置无法满足需求？您还可以在线安装 VSCode 插件来增强使用体验。

5.持久化 & 快速加载，随开随写，随时保存，再也无需担心断电未保存，不浪费你的每一份灵感。

6.个性化，随开随写，IDE 不能听歌、玩游戏？UI 不合口味？Cloud Studio 提供了丰富拓展 API，可以打造你的个性化工作空间。

先附上《Cloud Studio》官网地址，点击进入

image.png

体验

那我们就先在云端体验下这个东西好不好用，首先我们进入云端体验

image.png

咋一看这跟《VS Code》 简直是一毛一样呀，可以理解为这个东西就是web版的vscode，又是熟悉的感觉

image.png

不过有点区别的是，他这里多了一些云端部署，应该是很方便我们快速迭代一些轻应用，有一点我想吐槽在这个界面居然找不到模板的入口（我必须是在官网登录之后然后才会默认跳到模板市场页面，这一点希望将来可以优化一下）

image.png

言归正传我们现在来到模板市场页面

大概看了一下，模板市场的框架模板还是比较丰富的，个人感觉对前端开发者比较友好，接下来我们选择我们今天的主角vue3

image.png

image.png

image.png

选择模板之后，自动帮我们 npm install npm run dev了，速度表示也是非常快，这一点还是非常友好的，然后我们开始随便测试一些代码，可以看到，我声明了一个const还没保存它会自动帮我们保存并且校验

image.png

而且他是热更新的，并且是非常快的

image.png

现在我们来引入一些第三方的ui组件库试试，就以element-plus举例，安装还是非常快的

image.png

接下来我们使用一些组件，也是可以正常使用的

image.png

然后我们再试试打包项目看看

image.png

奇怪的是打个包我不知道为什么内存会占用满了，导致打包程序也是被终止了（这点估计还是要优化下）

感受

经过我本人的测试使用，个人感觉这款《Cloud Studio》综合体验还是不错的，可以令我们快速迭代开发一些轻应用，妈妈再也不用担心我们开发还要装各种环境的烦恼了，当然了，使用过程中还是有一些地方体验做的不好，希望将来也能慢慢去优化一下，总而言之没有一款产品一出来就是完美的，也都是需要我们用户和产品的共同体验使用下才能慢慢去完美，至此我的体验到此为止，谢谢大家。。。。