Cloud Studio尝鲜，在线构建vue3应用【玩转 Cloud Studio】

Cloud Studio是一款在线版的VsCode,无需本地安装vscode，浏览器上直接在线code,对于不想安装本地vsCode，如果你远程办公，如果你不想背着电脑回家，家里有一台能联网的机器，那么你不用远程控制公司电脑，你只需要登录cloud studio就可以在线编码，并实时保存代码，这是一种趋势，也是一种非常不错的体验，本文是一篇笔者关于Cloud Studio在线编程的入门使用体验。

正文开始...

授权登陆

打开在线网址https://cloudstudio.net/

然后登陆，我这里选择授权了自己的github账号，登陆后有很多可选的项目模版

我选择了一个vuejs的最新模版，初始化安装的速度与本地安装时间上并没有太大的感觉

安装好后，右侧会有一个浏览器预览的显示面板

然后你会看到这界面好熟悉，简直跟vscode一模一样

不过在右侧的模拟器上，有个可扫的调试二维码，这样你就可以用手机扫二维码在你手机上真机调试显示你网页的内容了

对于这点，在移动端页面调试，这就提供了很大的方便

其实右侧的预览器，就是一个iframe加载的一个网页，当然CloudStudio在线实时，是无感知的，修改代码，右侧内容会自动热更新，并不会感觉到整个页面有刷新,这实际上是webpack-dev-server插件做了热更新，页面无感知的刷新

使用插件

这里我们安装pinia尝试代替vuex方案以及使用vue-router@4

安装得非常的快，简直是秒装，被惊艳到了。

然后我们在main.js中引入pinia，参考pinia官方文档

代码语言：javascript复制

// main.js

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import App from './App.vue'

const app = createApp(App)

const pinia = createPinia();

app.use(pinia);

app.mount('#app')

并且会有vscode一样的在线提示

在src目录下新建router/index.js

代码语言：javascript复制

// router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';



import Home from '../pages/home/Index.vue';

import About from '../pages/about/Index.vue';

import Hello from '../components/HelloWorld.vue';



const routes = [

  {path: '/', component: Hello},

  { path: '/home', component: Home },

  { path: '/about', component: About },

];

const router = createRouter({

    history: createWebHashHistory(), // hash

    routes,

  })

export const installRouter = (app) => {

    app.use(router)

}

然后在main.js中引入router/index.js

代码语言：javascript复制

import { createApp } from 'vue'

import {installRouter} from './router'

...

installRouter(app);

app.mount('#app')

在页面上就是这样的

最底部有点击切换路由，底部能看到对应的具体路由地址，你也可以复制右侧的浏览器临时地址https://efoqdv-cdjvut-8080.preview.myide.io直接在浏览器打开，并且有二维码，也可以直接用手机扫码实时预览真机查看

至此我们已经尝试用cloud studio搭建了一个比较基础的vue3项目

面板介绍

cloud studio工作台基本与vscode一样，并且如果代码报错，底部终端也会有对应的日志报错，体验也是非常友好，我们看下这工作台面板还有其他什么功能

但我们点击最左下脚时，我们可以回到最初始化的面板

在面板中，我们可以看到自己正在运行的项目，并且升级空间配置，让你体会到会员的服务

并且在这个面板中支持修改当前的项目名

git 提交

在我们默认使用面板开始一个项目时，实际上该项目是存放在root/RemoteWorking,但是当我想关联到github的一个项目时，你可以这么做

填写你的github地址，然后默认就会在root文件下关联一个文件

并且你会发现，在.ssh文件下自动生成一个id_rsa,所以此时你就可以将默认初始化的项目，移动到我lessonNote上，在lessonNote新建一个cloud-studio目录，然后将此目录尝试提交我的github上

依次执行以下命令

代码语言：shell复制

 git add .

 git commit -m 'add cloud-studio'

 git push origin maste

此时当你打开github项目时，就会显示成功提上去了

此时如果你的文件貌似在github无法正常打开，那么肯定是当前文件夹有默认的隐藏文件，你只需要把.git这样的隐藏文件删除，重新上传即可

使用感受

1、当我每次退出工作台时，重新进去，都需要重新安装，提示还是很友好

2、当我修改文件，终端输入git status查看不到对应修改的文件，不知道是不是哪里设置原因。

3、不知道我这使用的内存会有多大，限时1000分钟，这个时间不知是否满足广大群众

4、远程协助办公的不错体验，比起远程工具向日葵控制另外一台机器或者vpn，未来很有市场，是趋势

腾讯云ide vue.js

0 人点赞