潍坊网站建设方案咨询,wordpress子页面,如何建设一个个人网站,经典软文广告案例【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建一个web页面 一、前言二、Cloud Studio 简介1.Cloud Studio 是什么2.Cloud Studio 的优点 三、Cloud Studio 登录注册四、Cloud Studio 的初体验五、使用 Cloud Studio 开发一个简版的web页面1.手动启动项目2.自动启… 【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建一个web页面 一、前言二、Cloud Studio 简介1.Cloud Studio 是什么2.Cloud Studio 的优点 三、Cloud Studio 登录注册四、Cloud Studio 的初体验五、使用 Cloud Studio 开发一个简版的web页面1.手动启动项目2.自动启动项目 六、上传代码仓库七、开发空间八、总结 一、前言 个人主页: ζ小菜鸡大家好我是ζ小菜鸡让我们一起来学习使用Cloud Studio快速构建一个web页面如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连) 二、Cloud Studio 简介
1.Cloud Studio 是什么 Cloud Studio 是基于浏览器的集成式开发环境IDE为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装随时随地打开浏览器就能在线进行开发、测试和部署使开发者可以快速且轻松地进行生产力工作而不必担心复杂的配置和环境维护。 。 2.Cloud Studio 的优点 Cloud Studio 作为在线 IDE包含代码高亮、自动补全、Git 集成、终端 IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。支持远程访问云服务器为腾讯云 SCF 行业用户提供开发-测试-部署完整闭环的云原生开发体验。以下从5个方面简单介绍一下Cloud Studio 的优点
云端开发Cloud Studio的开发环境全部托管在云端因此不需要安装任何软件也不必担心复杂的环境配置。开发者只需通过浏览器登录即可随时随地访问。多语言支持 Cloud Studio支持多种编程语言包括Python、Java、JavaScript等。开发者可以在同一个集成环境中编写不同语言的代码实现更加高效的开发和测试。自动化测试Cloud Studio提供了一系列的自动化测试工具和框架帮助开发者提高代码质量减少发现缺陷的时间。这些工具包括代码复杂度分析、单元测试、集成测试等等。集成部署Cloud Studio确保了部署的连续性和自动化。当代码发生改动时它能够自动检测并构建代码并将新增的功能自动部署到云平台上让开发过程变得更加高效和流畅。多人协作Cloud Studio支持多人协作即使开发者分布在世界各地也能够轻松地进行协作。开发者可以在同一个项目内交流并共享代码和文档以此建立起更好的协作关系。 总之Cloud Studio是一种高效且强大的云端开发平台它能够大大地提高开发人员的生产力让他们更加专注于代码的编写和功能的实现同时也大大降低了开发和部署的复杂性。 三、Cloud Studio 登录注册 【1】打开Cloud Studio官网: https://www.cloudstudio.net/?utmcsdn点击注册如下图所示 【2】选择使用什么账户号注册小菜鸡用的是微信如下图所示 【3】注册完成后出现以下界面说明登录成功如图所示 四、Cloud Studio 的初体验 【1】即使从来没有学习过 React只需要打开对应的 React 框架模板即可开始初始化一个 React 的工作空间如下图所示 【2】在等待不到 10s 左右与带宽网速差异有区别云 IDE 就已经初始化完毕如下图示所示 【3】可以看到初始化左侧代码后控制台会安装依赖及启动一个 React 简单的模板项目。 // 进入当前目录
cd ./
// 设置port的环境变量
set port3000
// 导出port的环境变量
export PORT3000
// 相当于 yarn install安装相关依赖
yarn
// 启动开发环境
yarn start --port3000【4】到此可以发现我们如果用一台新主机只要有浏览器就不需要准备任何环境不需要安装任何软件只需要能够联网就能在几分种内初始化一个 React 项目如下图所示这对新技术的学习是非常高效的。 【5】使用Cloud Studio创建项目 创建项目的本质是创建或者选择一个目录作为项目在 Cloud Studio 中创建项目的方式有很多种 方式一选择一个已有的目录作为项目 方式二通过文件菜单选择一个目录作为项目 方式三通过命令行终端选择一个目录作为项目 1.新建一个终端如下图示所示 2.使用 cloudstudio 命令打开一个目录作为项目如下图所示 方式四从代码仓库中克隆项目 【6】小试牛刀 Cloud Studio 目前支持 Python、Java、Go、C/C 及 Node.js 语言。该步骤以命令行及界面两种方式分别运行 Python、Go 及 C 语言程序示例您可按需选择对应语言进行操作小菜鸡分别使用Python和Node.js进行操作。 Python
创建一个目录 DEMO并在 Cloud Studio 打开 DEMO 目录。在 DEMO 目录下创建简单示例文件 main.py。如下图所示 使用以下任意一种方式运行该程序 Node.js
创建一个目录 DEMO并在 Cloud Studio 打开 DEMO 目录。在 DEMO 目录下创建简单示例文件 main.js。如下图所示 使用以下任意一种方式运行该程序 五、使用 Cloud Studio 开发一个简版的web页面 horoscope项目是基于Flask开发的应用程序用户可以查看十二星座的整体页面以及某一星座的具体的星座页面的介绍。 1.手动启动项目 【1】项目的导入 【2】项目运行 第一步打开app.py主程序 第二步右击–选择Run Python File in Terminal 第三步第三步点击”打开浏览器” 这里需要注意如果运行不出来需要在终端中输入这两行代码即可 第四步在浏览器中输入路由访问视图函数 第五步显示项目效果星座首页 第六步点击任意一个星座跳转到星座详情页 2.自动启动项目 【1】项目的导入 【2】生成并配置preview.yml文件 该文件的格式说明如下
# .vscode/preview.yml
autoOpen: true # 打开工作空间时是否自动开启所有应用的预览
apps:- port: 9000 # 应用的端口run: pip install -i https://mirrors.tencent.com/pypi/simple/ -r ./requirements.txt bash /usr/bin/start-vnc-session.sh python app.py # 应用的启动命令root: ./app # 应用的启动目录name: horoscope # 应用名称description: horoscope项目是基于Flask开发的应用程序用户可以查看十二星座的整体页面以及某一星座的具体的星座页面的介绍。 # 应用描述autoOpen: true # 打开工作空间时是否自动开启预览优先级高于根级 autoOpen 【3】添加配置文件“requirements.txt”这里我们选Flask 2.0.1版本。 配置完成后我们再次启动项目就能自动进入预览了哈哈。 六、上传代码仓库 填写README.md文件
# 项目说明本项目来源于《腾讯云 Cloud Studio 实战训练营》的参赛作品该作品在腾讯云 Cloud Studio 中运行无误。
1项目的导入
2项目运行
第一步打开app.py主程序
第二步右击--选择Run Python File in Terminal
第三步第三步点击”打开浏览器”
这里需要注意如果运行不出来需要在终端中输入这两行代码即可
第四步在浏览器中输入路由访问视图函数
第五步显示项目效果星座首页
第六步点击任意一个星座跳转到星座详情页左边功能菜单区找到“源代码管理” 使用 git init 进行仓库初始化执行以下命令
git init输入需要提交的message信息再点击Commit进行仓库提交 项目代码地址https://gitcode.net/weixin_45191386/star_project.git 七、开发空间 查看正在使用的开发空间可以看到我们使用的模板是基于 Python创建的模板还可以在“近期删除”的空间进行回滚。 如果觉得“标准版本”不符合要求还可以进行配置升级不过修改需要下次重启后才能生效。 停止该项目。 删除该项目即可销毁这个工作空间。 八、总结
本次实验主要是引导大家如何使用 Cloud Studio 进行云编程并且动手使用云 IDE Cloud Studio 快速搭建并开发还原一个移动端 React H5 的简版点餐系统页面。在一台新的机器设备上从 0 到 1 体验云 IDE 给我们带来的优势不需要装各种环境简单易用开箱即可上手。一站式云端开发环境Cloud Studio 提供了完整的云端开发环境包括代码编辑器、运行环境、调试工具等让开发者能够在一个平台上完成所有的开发任务。丰富的云端资源通过 Cloud Studio,开发者可以快速创建和管理云服务器、数据库、存储等资源无需关心底层的硬件和运维细节。总的来说Cloud Studio 是腾讯云为开发者提供的一款强大而易用的云端开发工具。通过 Cloud Studio ,开发者可以更加高效地进行云端开发和部署加速企业的数字化转型进程。小菜鸡在操作体验的过程时首次忘记存档重启页面时造成了代码的丢失如果能实时自动存档就好了。 【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原到此就结束了感谢大家阅读如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)
