【玩转 Cloud Studio】记录Vue3+TS+Vite搭建教程

最近在看 Vue3 教程，本地电脑装了 nvm 来切换 node 环境，但是由于目前的项目使用的版本较低，每次都要来回切换，有点不是很方便，在逛云+社区时发现，腾讯云居然有在线的 IDE - Cloud Studio（基于浏览器的集成式开发环境），提供每月赠送 1000 分钟免费额度。正好用来练练手，看看用起来和本地的 VSCode 有什么区别。

由于都是腾讯旗下的，所以微信就可以很方便的登录进去。

登录之后界面也是很简洁，我们可以通过左下角新建工作空间

可以看到有很多预设环境，我们可以根据项目使用对应的环境，我打算学习 Vue3，因此我选择了 Node.js 环境。

填写基本信息、代码来源、规格配置，点击新建，我们的环境就搭建完成了，如果是我们在本机的话，需要安装 node 等一系列环境，中途可能会出问题，使用 Cloud Studio 就可以跳过这些可能出现的问题。

这个界面是不是很眼熟，对没错，就是 VSCode，官方也有介绍，基于 VS Code，提供自动导入包，语法高亮，代码补全，代码跳转等特性，像本地 IDE 一样自然。 万事俱备，项目搭起来。 首先安装 Vite

npm install vite

接下来创建基于 vite 的项目

yarn create vite

这里就不详细介绍了，如果感兴趣的话可以关注公众号【青年码农】更多关于 Vue3 的教程。运行完成，项目也就搭建完成了。

进入项目安装依赖，启动项目。

cd vue3_vite

yarn

yarn dev

启动成功，直接内置预览 19 一个简单的 Vue3 项目就搭建完成。对比我本地的 VSCode，确实快了不少，可能是我的电脑太垃圾了。运行的软件也比较多。

总结

使用下来，确实和本地的 VSCode 没什么区别，甚至比我在本机运行还要快，在一些应急的情况下，确实是非常好的选择，并且赠送 2 核 4GB 每月 1000 分钟，就我个人而言，应急还是够用的。