Cloud Studio尝鲜，在线构建vue3应用
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官方文档[1]
// 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
// 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
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上
依次执行以下命令
git add .
git commit -m 'add cloud-studio'
git push origin master
此时当你打开github项目时，就会显示成功提上去了
如果你的文件在github无法正常打开，那么肯定是当前文件夹有默认的隐藏文件，你只需要把.git这样的隐藏文件删除，重新上传即可
使用感受
1、当我每次退出工作台时，重新进去，都需要重新安装，提示还是很友好
2、当我修改文件，git status查看不到对应修改的文件，不知道是不是哪里设置原因。
3、不知道我这使用的内存会有多大，限时1000分钟，这个时间不知是否满足广大群众
4、远程协助办公的不错体验，比起远程工具向日葵控制另外一台机器或者vpn，未来很有市场和趋势
5、本文示例code example[2]
参考资料
[1]pinia官方文档： https://pinia.vuejs.org/getting-started.html#installation
[2]code example： https://github.com/maicFir/lessonNote/tree/master/cloud-studio
最后，看完觉得有收获的，点个赞，在看，转发，收藏等于学会，欢迎关注Web技术学苑，好好学习，天天向上！