【腾讯云Cloud Studio 实战训练营】- Cloud Studio 云开发“沙箱环境”

随着Web应用程序日益复杂，后台服务的需求变得日益迫切。在过去，大多数后台服务都是用Java或PHP、go等传统语言编写的。

本人是搞前端开发工作的，平时想想搞个web服务器，要装个Nginx吗？太麻烦了，还要配置啥的，前端找了找就找到了一个service npm包，但是又要装全局包，比较麻烦，有没有一种用了就可以删除的“沙箱环境”？

经过网上搜索和探索，找到了云IDE的解决方案，让我们一起看看了解一下。

活动了解

腾讯云 Cloud Studio 实战训练营”是由腾讯云联合 CSDN 推出的系列开发者技术实践活动，通过技术分享直播、动手实验项目、优秀代码评选、有奖征文活动等，让广大开发者沉浸式体验腾讯云开发者工具 Cloud Studio的同时，实现技术实战能力提升。本次活动覆盖多个难度等级、支持当前几乎所有主流编程语言，无论你是技术小白，还是资深开发者，都希望你能有所收获！

Cloud Studio介绍：

Cloud Studio（云端 IDE）是腾讯云为编程者打造的专属开发利器，开发者无需考虑编程本身以外的限制，无缝对接部署至腾讯云，还有协作、团队管理等功能强势辅助，让开发者安心高效编程。

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

应用场景

在线编程

Cloud Studio（云端 IDE）内置丰富的开发环境，无需配置即可使用，只需打开浏览器，即可拥有完备的线上编程体验，基于 Web 端的代码编辑器，简洁的界面与全面的功能，非常适合在线施展编码潜能。
腾讯云 SCF 平台集成

Cloud Studio（云端 IDE）支持在线编辑、在线调试、持久化资源，为腾讯云 SCF 行业用户提供开发、测试到部署完整闭环的云原生开发体验。

产品优势

Cloud Studio（云端 IDE）是腾讯云为用户打造的云端集成开发环境，其产品优势如下所示。
全功能
无需下载安装，随时随地开发编码，拥有媲美本地 IDE 的流畅编码体验。
多环境
内置 Node.js、Java、Python 等常见环境，也可以连接到云服务器进行资源管理。
在线预览
在线预览快速生成预览链接，方便分享他人展示项目或在线调试。
兼容 VS Code 插件
默认的配置无法满足需求，可以在线安装 VS Code 插件来增强使用体验。
持久化和快速加载
随开随写，随时保存，再也无需担心断电未保存，不浪费您的每一份灵感。

活动实验手册

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

选择一下《使用 Cloud Studio 快速构建 React 生成点餐 H5 页面》

点击打开一个工作空间，就相当于是一个开发环境，我认为是集成了OS环境，React相关的开发Node环境、Npm环境、React包这些。

直接启动一个React的开发环境。

经过手册的实操，没过多久就完成了。

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。那么antd有哪些特性和优势呢？

antd的特性和优势如下：

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

兼容环境#

• 现代浏览器和 IE11（需要 polyfills）。
• 支持服务端渲染。
• Electron

antd安装

• 安装组件库：npm install antd --save或yarn add antd
• 安装图标库：npm install @ant-design/icons -s

2、引用

使用组件：使用组件的时候，需要在对应的react组件中，引入antd组件和antd样式文件。或者直接在入口文件main.js中全局引入(就需要每次使用都要引入了)

引入相关组件：import { ConfigProvider, DatePicker, message } from ‘antd’;

引入样式：import ‘antd/dist/antd.css’;

插件：为了可以像上面那样按需加载组件，需要引入babel，使用 babel-plugin-import 来进行按需

使用 Day.js 替换 momentjs 优化打包大小：可以使用 antd-dayjs-webpack-plugin 插件用 Day.js 替换 momentjs 来大幅减小打包大小。这需要更新 webpack 的配置文件如下：

1、Button组件

文本

type：按钮的类型，取值为primary、default、dashed、text、link
danger：表示危险按钮
size：表示按钮的大小,取值large、middle、small
disabled：表示按钮不可用
icon：设置按钮上的图标
shape：设置按钮的形状

何时使用#
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

在 Ant Design 中我们提供了五种按钮。
主按钮：用于主行动点，一个操作区域只能有一个主按钮。
默认按钮：用于没有主次之分的一组行动点。
虚线按钮：常用于添加操作。
文本按钮：用于最次级的行动点。
链接按钮：一般用于链接，即导航至某位置。

以及四种状态属性与上面配合使用。
危险：删除/移动/修改权限等危险操作，一般需要二次确认。
幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
禁用：行动点不可用的时候，一般需要文案解释。
加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

非常方便的就集成了antd这个UI库。

总结：

Cloud Studio 云端 IDE 的工作空间内置预览插件，方便您生成一个预览链接，用于实时调试预览或项目展示。下面我们以创建一个 React 应用，并实时开发调试为例，来简单介绍一下如何使用 Cloud Studio 进行在线预览。

Cloud Studio 云端 IDE 推出最新套件 MetaWork ，通过开启项目工作空间的协作模式，开发人员之间的工作能够通过音视频和留言互助联动，使开发工作更具沟通便捷性与高效性。

为方便用户拉取或者发布代码至第三方仓库，Cloud Studio 云端 IDE 现提供快速关联仓库服务商能力。用户可在新建工作空间导入仓库、个人设置或者编辑器源代码管理中进行账号登录授权关联，即可直接选择所关联服务商的仓库。