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

2022-09-02 15:24:54 浏览数 (2)

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

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

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

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

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

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

代码语言:javascript复制
npm install vite

接下来创建基于 vite 的项目

代码语言:javascript复制
yarn create vite

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

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

代码语言:javascript复制
cd vue3_vite

yarn

yarn dev

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

总结

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

0 人点赞