投资界新闻 -松禾资本正式推出三支新基金，计划募资总额近30亿元
06-18
前言在这篇文章中，我将使用Cloud Studio和Flutter完成一个属于自己的博客平台的搭建。并且这个项目将会作为模板供大家使用。
我们先来看看效果。 Cloud Studio Cloud Studio是一个基于浏览器的集成开发环境（IDE），为开发人员提供不间断的云工作站。
用户无需安装CloudStudio，只需打开浏览器即可随时随地在线编程。正如您所看到的，提供了许多模板和环境。
大家都知道我以前是做Flutter的，所以先尝试了一下Flutter模板。然后一开始我可能不太擅长，但是熟悉了一段时间之后，我就发现了他的好处。
作为一款在线IDE，Cloud Studio包含了代码高亮、自动补全、Git集成、终端等基本IDE功能。它还支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用程序的开发、编译和部署。
。我使用Cloud Studio将这个博客网站推送到Gitee，这样每个人都可以访问。
2、应用场景 Cloud Studio 在线编程工具适用于以下场景： 2.1 快速启动项目。使用Cloud Studio预设的环境，您可以直接创建相应类型的工作区并快速启动项目进入开发状态，无需繁琐的环境。
配置。下面是我的工作区。
下次使用时，可以进入相应的工作空间继续编写代码。非常方便。
2.2 网页实时调试 Cloud Studio内置预览插件，可以实时显示Web应用程序。当您的代码发生更改时，预览窗口将自动刷新，以便您可以在 Cloud Studio 中实时开发和调试网页。
下面是我创建的第一个模板项目，你会发现非常方便。 2.3 远程访问云服务器 Cloud Studio 支持您连接到自己的云服务器，以便您可以在编辑器中查看云服务器上的文件并进行在线编程和部署工作。
只要您拥有自己的云服务器，您就可以通过这里的配置轻松开始开发。3. 登录并注册Cloud Studio。
在线编程平台支持使用CODING (opens new window)账号和GitHub账号，也支持微信登录。您可以在登录（打开新窗口）界面输入对应的账户登录Web IDE。
这里我用的是微信。登录。
4、工作空间的创建和使用工作空间是一个虚拟的计算单元，包含独立的存储、计算资源和开发环境。 Cloud Studio 按工作区组织。
本文向您介绍如何创建工作区。 4.1 创建工作区。
进入Cloud Studio云IDE。您可以通过两种方式创建工作区。
第一种方式：点击模板直接创建工作区。第二种方式：点击【新建工作空间】进入工作空间创建页面 4.1 .1 填写工作空间信息。
第一种方式是点击模板创建工作区，会自动生成工作区名称并运行模板预设的环境和示例代码。这里我使用的是 Flutter。
第二种方法是创建工作区，然后选择预设环境，填写工作区名称和描述，选择运行环境和代码源。工作区名称：您的工作区的唯一标识符。
只能由字母、数字、下划线(_)、破折号(-)和点(.)组成，不能包含空格或其他字符。描述：此工作区角色的描述。
运行环境：工作区中代码运行的环境。您可以选择预设的环境，包括Ubuntu、Python、Java和Node.js；您也可以选择将其连接到您自己的云服务器。
代码源：工作区中的代码源，这里我们选择“空”，即不添加任何代码。单击【创建】按钮，完成工作区的创建。
您还可以创建一个工作区，其代码来自Git存储库，代码将自动克隆到该工作区。 4.2 工作空间的使用 您可以将自己的项目代码存放在Cloud Studio云IDE的工作空间中，并安装所需的软件环境。
运行或编译项目，本文向您介绍如何使用工作区。注意：数量限制：目前每个用户最多可以创建 10 个工作区，并且只能同时运行 1 个工作区。
如果需要打开另一个工作区，需要先关闭当前正在运行的工作区。时间限制：每个用户每月可以免费使用工作区总共几分钟。
超过时间将会扣费（连接云主机的工作空间则无此限制）。 4.2.1 工作区界面介绍 工作区是我们的主要工作区域，主要由顶部菜单栏、左侧操作面板、右侧代码编辑区和底部状态栏组成。
您可以根据自己的习惯设置界面外观和偏好，并安装您需要的插件。需要注意的是，您的首选项和插件在每个工作区中是相互隔离的，这意味着您可以为不同的工作区设置不同的首选项并安装不同的插件。
其中大部分与本地使用 vscode 时相同。我们可以通过终端来进行这些操作。
点击菜单栏--终端--新建终端。底部将打开一个面板。
点击【终端】，切换到终端。 4.2.2 管理工作区 在Cloud Studio云IDE的工作区列表页面，您可以运行、停止、删除和恢复工作区。
运行 单击相应的工作区卡片，该空间将打开并在新页面上运行。此时，工作区卡片上会显示“正在运行”状态。
停止 对于处于“运行”状态的工作区，单击卡片右侧的【停止】即可停止该工作区的运行。删除 您可以删除未运行的工作区。
单击工作区卡片右下角的【删除】即可将其删除。恢复 为了防止意外删除，已删除的工作空间将显示在下方的“已删除工作空间”列表中，并保留 24 小时。
在此之前，您可以随时单击【恢复】来恢复您的工作空间。超过24小时未恢复的工作空间将被永久销毁。
5.使用Git进行版本控制。 Cloud Studio云IDE的工作区支持从代码仓库创建，但在此之前，您需要将工作区的SSH Key添加到相应代码托管平台的个人公钥列表中。
5.1Cloud Studio查看SSH公钥这里我们点击个人头像，打开系统设置，里面包含了SSH公钥，然后我们复制密钥并添加到Gitee5.2Gitee中添加了下图的SSH公钥，添加SSH公钥，添加标题和公钥 5.3 在Gitee上新建仓库。在云 IDE 的工作区中打开终端。
5.4Cloud Studio 配置邮箱和密码代码语言： javascript copy git config --global user.name "nuts" git config --global user.email "" 5.5Cloud Studio 提交代码，然后初始化仓库并提交修改，添加commit信息，然后推送代码语言： javascript copy git initgit Remote add origin :jianuo/flutter_bloc_super.gitgit add .git commit -s -m 'initialize' git push origin master 6.Flutter博客网站开发 Flutter 是 Google 的移动 UI 框架。 Flutter最近发布了Flutter V3.10.6，可以在iOS、Android、Web等多个平台上快速构建高质量的原生用户界面。
Flutter 可以使用现有代码。 Flutter正在被全球越来越多的开发者和组织使用，并且Flutter是完全免费和开源的。
目前，Cloud Studio云IDE支持Flutter Web应用程序开发。这就是为什么今天我们使用 flutter 创建一个在 Web、macOS 应用程序、Android 和 iOS 应用程序上运行的响应式博客主题。
6.1 创建项目 打开云端IDE后，创建Flutter项目。目前，我使用的是 Flutter 3.0.1。
创建完成后我们就可以编写代码了。首先打开云IDE并选择创建项目。
然后在这里我们命名我们的项目并等待项目。加载完成后，再运行下面一行命令代码语言： javascript copy cd ./ && flutter pub get && flutter run -d web-server --web-port --web-hostname 0.0.0.0 && echo success 就可以了选择打开内置浏览器还是浏览器这里我选择调用浏览器，可以看到这个项目运行成功。
这时候就说明我们的环境已经OK了。我们可以稍后再工作。
6.2.打开端口面板进行实时预览和调试。点击最右侧的按钮，弹出预览页面。
请参阅这些红色文字 要在运行时进行热重启更改，请按“r”或“R”。这意味着项目已经编译完成。
修改代码并重新编译。单击终端并按 r 键重新编译。
然后在预览页面按刷新按钮即可看到实时修改后的效果。目前Flutter Web应用不支持热更新，需要手动刷新页面。
项目编译完成后才能访问代码预览页面，否则会一直卡在Loading界面。如果卡在加载界面，请尝试刷新预览界面。
6.3 发布网页版。希望您在完成迁移后尽快发布。
可以作为预览版：参考文章：iOS有ios文件夹，但当前目录结构没有web文件夹。 6.3.1.创建Web文件夹输入以下命令创建Web文件代码语言：javascript copy flutter create。
然后就会创建一系列与web相关的文件，如下图，目录结构中还会多出一个web文件夹。如下图6.3.2所示。
我们知道如何打包网页版，要在android手机上使用，需要打包为apk。要在iPhone上使用它，需要将其打包为ipa。
同样的道理，如果要在浏览器上使用，也需要封装web相关的代码。代码语言： javascript copy flutter build web --web-renderer html?flutter build web ?flutter build web --web-renderer canvaskit 这将构建包含资源的应用程序，并将文件放入项目的 /build/web 目录中。
应用程序的典型发布版本具有以下结构： content_copy 代码语言：javascript copy /build/web assets AssetManifest.json FontManifest.json NOTICES 字体 MaterialIcons-Regular.ttf <其他字体文件> <图像文件> index.html main。 dart .js main.dart.js.map 启动 Web 服务器（例如 python -m SimpleHTTPServer，或使用 dhttpd 包），然后打开 /build/web 目录。
在浏览器中访问 localhost:（您之前使用 Python 启动的服务器）以查看应用程序的发布版本。经测试，以上三种方法都可以打包网页版。
第一种是针对移动端的，第二种是通用的封装方式，第三种是针对PC端的。然后将这三个方法封装起来。
，运行起来有什么区别？ flutter build web --web-renderer html 打开速度最快，兼容性好（指兼容IE、chrome、safari等浏览器） flutter build web 打开速度一般，兼容性好 flutter build web --web-renderer canvaskit打开速度最慢，兼容性好。 6.3.3 结论是采用第一种包装方式较好。
代码语言：javascript copy flutter build web --web-renderer html6.4 FAQ坑一：发现用浏览器打开index.html会一片空白，这是正常的。这不像前端web，html css js，点击index.html就可以访问。
在flutter中是无法直接访问的，所以必须放在容器内部才能访问，比如tomcat等。 陷阱二：如果你使用了nginx代理，但是用以下命令打开还是空白浏览器，是因为文件路径引用不正确。
有两种解决方案。 1：使用编辑器打开index.html，可以在看到源文件时将
如果可以看到源文件，请更改
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-21
06-17
06-17
06-21
06-17
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用