【腾讯云Cloud Studio 实战训练营】- Cloud Studio 云端开发的技巧_无论使用什么技术栈,在无需重写现有代码的前提下,通过引入react来开发新功能-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79516720/article/details/132665880

本文介绍了腾讯云的CloudStudio云端集成开发环境，如何帮助开发者实现云端编程，提高效率，特别是AI代码助手的功能，如代码逻辑解释、自动补全、错误修复等。文章还展示了如何在React和antd环境中实操，以及Umi框架在项目管理中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言：

做开发工作，你是不是也跟我一样，下班回到家，还老是遇到“xx，这个bug还没有好”，“xx，这个问题麻烦解决一下”，“xx，生产出问题了，赶紧处理一下。”，由于这种原因，不得不每天下班还要带个电脑坐地铁，室友的电脑又不好在电脑上装各种开发软件，本来就只是个看电影的电脑，装了之前，估计要卡的飞起。

Cloud Studio是一款非常强大的云端集成开发环境，可以帮助程序员在云上进行编程工作。使用Cloud Studio可以有效地提高编程效率，同时也可以帮助程序员更好地管理代码和项目。

在这里插入图片描述

二、活动介绍：

“腾讯云 Cloud Studio 实战训练营”是由腾讯云联合优快云推出的系列开发者技术实践活动，通过技术分享直播、动手实验项目、原创作品征集、有奖征文活动等，让广大开发者沉浸式体验腾讯云开发者工具 Cloud Studio的同时，实现技术实战能力提升。

这是一个云IDE进行开发工作，只需要一个浏览器就可以了，不需要本地安装任何插件、软件，这不刚好符合我的需求吗？有什么临时开发工作，只需要借她的电脑凑合一下即可。哪怕是回老家，也啥事情，也可到网吧临时解决一下，不用带着电脑满天飞。

三、Cloud Studio介绍：

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。

在这里插入图片描述

可以看到官网，还可以支持AI写代码，那不是以后可以有更多的时间进行摸鱼了？而且可以看到还支持多种语言、多种模板。

AI代码助手：

在这里插入图片描述

作为一个互联网JAVA后端开发程序员，介绍一下AI领域为互联网JAVA后端开发程序员提供的优势，提高代码质量和效率。

AI可以作为一个强大的辅助工具来提高互联网JAVA后端程序员的代码质量和效率。AI可以根据历史数据、模型和规则进行优化和自动化，从而减少代码中的重复劳动和冗余代码。此外，在开发过程中，通过使用AI技术，我们可以更好地理解数据、解决问题、优化性能和降低成本。

(1). 解释代码逻辑：

读不懂代码？没关系，让 AI 代码助手帮您解答。他是您开发过程中的贴心助理。他已经学习掌握了 20 多种编程语言和海量的开发范式了哦。

(2). 代码补全：

支持 20 多种语法深度学习，支持注释描述的补全，变量补全，函数补全等。README 等项目文件，根据目录结构自动生成 README、Git 配置、脚手架等文件。

(3). 编译出错建议：

编译出错不知道怎么去修复？还用根据错误码去搜索引擎去找？用 AI 代码助手的修复建议的捷径能力，一键找到代码问题，并推送修复方案。查缺陷漏洞，少了个 =，可能存在的空指针异常，AI 代码助手帮您查错纠错。

(4). 提交信息补全：

每次代码提交还用费心总结提交信息吗？让 AI 代码助手帮您快速一键补全提交信息的总结吧。MR 提交前的校对建议，AI 代码助手为每次 MR 提交前做校对，为您每次给团队评审都是一次信心满满的提交。

(5). 单元测试代码生成：
业务逻辑写完，还需要一个个的写单元测试？让 AI 代码助手帮您快速一键生成测试的代码吧。

全功能：

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

多环境：

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

在线预览：
在线预览快速生成预览链接，方便分享他人展示项目或在线调试。
兼容 VS Code 插件：

默认的配置无法满足需求，可以在线安装 VS Code 插件来增强使用体验。

持久化和快速加载：
随开随写，随时保存，再也无需担心断电未保存，不浪费您的每一份灵感。
在线协作功能：

四、Cloud Studio实操：

使用 Cloud Studio 快速构建 React 生成点餐 H5 页面
使用 Cloud Studio 快速构建 Vue 生成事务所 H5 页面
使用 Cloud Studio 快速搭建 JavaScript Snake Game
GPT+Cloud Studio “念咒编程”构建Excel工资表自动核算

官方给了4个手册，让我们可以快速了使用与了解Cloud Studio是一个大致什么样子的东西，选择一个React的模板进行开发。

React主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。

2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

4.灵活：无论使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。

从官网进行入，登录账号后，进入首页工作的区域。

在这里插入图片描述

跟着手册进行实操一下，马上就可以出来。

在这里插入图片描述

五、搭建一个antd的后管：

把公司的前端antd风格的网站搭建起来，试试看能不能进行运行，我们也选择React的环境。

功能模块：

布局与主题，增加tab标签页展示形式，可以浏览多个功能模块，会缓存当前页面状态。布局可自定义，主题颜色自定义。
个性化工作台，可以自己定义需要展示的模块，位置，大小。
表单页面，复制的表单布局，集成了很多小组件，如：一键复制，自动填充，自定义输入框…
各种窗口，可以支持新开 Modal ，抽屉，Tab标签页，新Window页…
拖动布局，支持水平布局、垂直布局、混合布局，也可以根据需要拼出各种复杂的布局。
高新能表格，支持拖动的表格，可以自定义列的显示、位置、宽度。并可以支持单页10000+的数据快速渲染。
自定义查询条件框，固定宽度可显示的数量有限，可以滚动分屏显示。
权限管理，用户管理、角色管理、权限管理、组织架构等。

在这里插入图片描述

将项目直接从gitee拉下来，我们就基于这个环境进行开发，看看需不需要装什么东西。

在这里插入图片描述

运行yarn和yarn start后，直接就可以运行起来，太方便了。不到5分钟就可以进行开发了。以后在家里，在网吧，也可以随时随地进行开发。

在这里插入图片描述

点击一下，运行效果没啥问题。

在这里插入图片描述

package.json分析：

{
  "name": "caladog-admin",
  "version": "1.0.0",
  "description": "This is my first react-tabs project",
  "scripts": {
    "start": "umi dev",
    "build": "umi build"
  },
  "dependencies": {
    "@ant-design/charts": "^1.4.2",
    "@ant-design/pro-layout": "^7.15.2",
    "@ant-design/pro-skeleton": "^2.1.2",
    "@ant-design/pro-table": "^3.6.11",
    "@react-pdf-viewer/core": "3.11.0",
    "@react-pdf-viewer/page-navigation": "3.11.0",
    "@uiw/react-amap": "^5.0.0",
    "@umijs/plugin-locale": "^0.16.0",
    "antd": "^5.5.1",
    "braft-editor": "^2.3.9",
    "dayjs": "^1.11.7",
    "file-saver": "^2.0.5",
    "immer": "^9.0.12",
    "immutability-helper": "^3.1.1",
    "lodash": "^4.17.21",
    "pdfjs-dist": "3.2.146",
    "ramda": "^0.28.0",
    "react-activation": "^0.9.12",
    "react-color": "^2.19.3",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-grid-layout": "^1.3.4",
    "react-helmet-async": "^1.3.0",
    "react-resizable": "^3.0.4",
    "react-select": "^5.2.2",
    "umi": "^3.5.13",
    "umi-request": "^1.4.0"
  },
  "keywords": [],
  "author": "Quinn",
  "license": "ISC"
}

使用的是Umi来进行启动项目的管理

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

它主要具备以下功能：

🎉 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
📦 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
🐠 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
🚀 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
🌴 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
🚄 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

antd的特性和优势如下：

1、提炼自企业级中后台产品的交互语言和视觉风格。
2、开箱即用的高质量 React 组件。
3、使用 TypeScript 构建，提供完整的类型定义文件。
4、全链路开发和设计工具体系
5、数十个国际化语言支持。
6、深入每个细节的主题定制能力。

六、Cloud Studio介绍：

腾讯云云端开发环境 Cloud Studio 是基于浏览器的集成式开发环境（Integrated Development Environment，IDE），为开发者提供了一个稳定的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能使用。其功能包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。

在这里插入图片描述