当前位置： 首页 > news >正文

网站开发和平台开发,新闻门户网站制作,自己做一个app,张掖专业做网站的公司前言#xff1a; Cloud Studio是一个在线的云集成开发环境#xff08;IDE#xff09;#xff0c;可以让开发人员在浏览器中轻松地开发、测试、调试和部署应用程序。它提供了基于云的计算资源和工具#xff0c;例如代码编辑器、编译器、调试器、版本控制系统和项目管理工具…前言 Cloud Studio是一个在线的云集成开发环境IDE可以让开发人员在浏览器中轻松地开发、测试、调试和部署应用程序。它提供了基于云的计算资源和工具例如代码编辑器、编译器、调试器、版本控制系统和项目管理工具等使开发人员可以在任何地点使用任何设备进行开发而不需要在本地安装软件。CloudStudio还能够集成多个云计算平台如AWS和Azure和其他开发工具以帮助开发人员更方便地进行云原生应用程序的构建和部署。 Cloud Studio 作为在线 IDE包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能同时支持实时调试、插件扩展等可以帮助开发者快速完成各种应用的开发、编译与部署工作。 官网https://cloudstudio.net/ 一、操作指南 对于新手来说产品文档可以帮助我们更好地了解产品的功能和用途。如果不熟 CloudStudio 的使用方法可能会遇到许多问题这会导致浪费时间。因此在使用CloudStudio 之前我建议大家先看一下 产品文档 另外该产品文档提供了登录与注册、应用开发 各种示例和图解这对于新手来说非常有帮助它可以大大减少学习成本更快地熟悉并掌握产品。  看完了产品文档我们就去实践一下吧 二、使用Cloud Studio快速构建React完成点餐H5页面还原 1.使用空间模板 点击空间模板选择全部模板然后往下滑 找到React 点击后是这样的等待几秒钟即可 进入空间后发现它在安装一些东西我们等待它安装完成即可 2.初始化项目 // 进入当前目录 cd ./
// 设置port的环境变量 set port3000 // 导出port的环境变量 export PORT3000 // 相当于 yarn install安装相关依赖 yarn // 启动开发环境 yarn start –port3000 仅仅几分钟我们的项目就初始化好了对于其他项目例如java项目Node.js项目等等。只要有浏览器就不需要准备任何环境不需要安装任何软件只需要能够联网就能在几分种内初始化一个项目这对新技术的学习是非常高效的。 3.安装依赖 1.安装 antd-mobile $ yarn add antd-mobile^5.32.0

or

\( npm install --save antd-mobile^5.32.0 2. 安装 Less (1).安装 less 和 less-loader yarn add -D less^3.12.2 less-loader^7.0.1 (2).暴露 webpack 配置文件 在webpack.config.js中进行配置这样进行配置需要暴露出React的config配置文件警告该操作不可逆。 npm run eject 输入 y 后项目会自动进行解构操作。 完成命令之后项目根目录会出现一个config文件夹里面是一些配置相关的脚本也可以看到 package.json 中多了很多属性值如 dependencies. 找到 config/webpack.config.js 文件找到第60行左右这块是设置 css 相关的代码。 复制一下sass的代码改为less // style files regexes const cssRegex /\.css\)/; const cssModuleRegex /.module.css\(/; const sassRegex /\.(scss|sass)\)/; const sassModuleRegex /.module.(scss|sass)\(/; // 新增加 Less 代码 const lessRegex /\.(less)\)/; const lessModuleRegex /.module.(less)$/; 继续向下搜索sass位置在 504 行左右能够找到以下代码。 和之前配置一样仿照sass的配置进行less的配置。 // less {test: lessRegex, // 有改动exclude: lessModuleRegex, // 有改动use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},less-loader // 有改动),sideEffects: true, }, {test: lessModuleRegex, // 有改动use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},},less-loader // 有改动), }, 这样就完成了webpack.config.js配置less可以在项目中使用less样式了。 (3).安装 normalize Normalize.css 是CSS重置的现代替代方案可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。 yarn add -D normalize.css^8.0.1 (4).上传项目需要的素材  以前上传服务器代码需要使用 Scp 命令或者装 Remote SSH 插件支持Cloud Studio 可以很方便默认支持文件上传与下载等常规的操作与本地 IDE 体验一致 可以直接拖动文件到 IDE 编辑区域本文使用方式右击 IDE 编辑区域上传 直接将 img 文件夹拖动到src目录下即可。点击下载img压缩包 (5).替换App.js主文件  以下是点餐系统的主要业务代码复制到src/App.js直接替换即可。 import ./App.css; import React, { useState } from react import { NavBar, Toast, Swiper, SideBar, TabBar, Badge } from antd-mobile import {AppOutline,ExclamationShieldOutline,UnorderedListOutline,UserOutline, } from antd-mobile-icons import BannerImg from ./img/banner.png import HotImg from ./img/hot.png import Food1Img from ./img/food1.png import Food2Img from ./img/food2.png import CartImg from ./img/cart.png import ./index.less import normalize.cssfunction App() {const [activeKey, setActiveKey] useState(1)const tabbars [{key: home,title: 点餐,icon: AppOutline /,},{key: todo,title: 购物车,icon: UnorderedListOutline /,badge: 5,},{key: sale,title: 餐牌预告,icon: ExclamationShieldOutline /,},{key: 我的,title: 我的,icon: UserOutline /,badge: Badge.dot,},]const back () Toast.show({content: 欢迎进入点餐系统,duration: 1000,})const items [, , , ].map((color, index) (Swiper.Item key{index}img style{{width: 100%}} src{ BannerImg }/img/Swiper.Item))const tabs [{ key: 1, title: 热销 },{ key: 2, title: 套餐 },{ key: 3, title: 米饭 },{ key: 4, title: 烧菜 },{ key: 5, title: 汤 },{ key: 6, title: 主食 },{ key: 7, title: 饮料 },]const productName [小炒黄牛肉,芹菜肉丝炒香干,番茄炒鸡蛋,鸡汤,酸菜鱼,水煮肉片,土豆炒肉片,孜然肉片,宫保鸡丁,麻辣豆腐,香椿炒鸡蛋,豆角炒肉]const productList productName.map((item, key) {return {name: item,img: key % 2 1 ? Food1Img : Food2Img}})return (div classNameAppNavBar onBack{back} style{{background: #F0F0F0,fontWeight: bold}}点餐/NavBardiv classNamehead-cardSwiperstyle{{–border-radius: 8px,}}autoplaydefaultIndex{1}{items}/Swiper/divdiv classNameproduct-boxSideBar activeKey{activeKey} onChange{setActiveKey}{tabs.map(item (SideBar.Item key{item.key} title{item.key 1 ? divdiv classNameflex-centerimg style{{display: block,width: 16px,marginRight: 5px}} src{ HotImg }/imgdiv{ item.title }/div/div/div : item.title} /))}/SideBardiv classNameproduct-rightdiv classNameproduct-title热销/divdiv classNameproduct-list{productList.map((item, key) {return (div classNameproduct-itemdiv classNameproduct-item-leftimg style{{display: block,width: 76px,marginRight: 5px}} src{ item.img }/imgdiv classNameproduct-item-left-infodivdiv classNameproduct-item-left-info-name{ item.name }/divdiv classNameproduct-item-left-info-number月售{key 1}0 赞{key * 5}/div/divdiv classNameproduct-item-left-info-price¥10/div/div/divdiv classNamecartimg style{{display: block,width: 30px,marginRight: 5px}} src{ CartImg } onClick { () Toast.show({content: 添加购物车成功}) }/img/div/div)})}/div/div/divTabBar{tabbars.map(item (TabBar.Itemkey{item.key}icon{item.icon}title{item.title}badge{item.badge}/))}/TabBar/div); }export default App; 在 src 目录下创建一个 index.less 文件将以下 less 相关的代码复制到该文件中即可。 .head-card {padding: 10px 20px;box-sizing: border-box; }.flex-center {display: flex;align-items: center; }.product-box {display: flex;align-items: center;width: 100%;height: calc(100vh - 45px - 130px - 50px); }.product-right {flex: 1;height: 100%; }.product-title {font-family: PingFangSC-Regular;font-size: 14px;color: #000000;text-align: left;padding-bottom: 10px; }.product-list {height: calc(100% - 24px);overflow-y: auto; }.product-item {position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;padding-left: 10px;box-sizing: border-box;margin-bottom: 10px;-left {display: flex;-info {padding-left: 3px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;-name {font-family: PingFangSC-Regular;font-size: 14px;color: #000000;text-align: left;}-number {padding-top: 3px;font-family: PingFangSC-Regular;font-size: 11px;color: #787878;text-align: left;}-price {font-family: PingFangSC-Regular;font-size: 18px;color: #FF1800;text-align: left;}}} }.cart {position: absolute;right: 10px;bottom: 0; } 复制完成后在控制台中输入 yarn dev即可启动该项目。 Cloud Studio 内置预览插件可以实时显示网页应用当代码发生改变之后预览窗口会自动刷新即可在 Cloud Studio 内实时开发调试网页了因为本项目是移动端H5的项目所以需要打开“toggle device”按钮查看样式。提供了二唯码在手机端进行调试。 效果图 三、补充说明 1.其他项目开发 亲爱的小伙伴们正如我们之前所说的一样CloudStudio不仅可以帮助您快速搭建react项目而且同样支持Java、node.js、Flutter等多种项目类型欢迎大家尝试并体验一下其他项目。 可以参考产品文档里面的应用开发 2.工作空间免费时长 Cloud Studio 团队基于老用户使用体验角度和新用户上手成本考虑现实行每月赠送 3000 分钟的工作空间免费时长 。当月时长用完即止未使用的时长不予保留和累加下月刷新清零再给予 3000 分钟免费时长 故此我们在不使用产品的时候需要点击停止不然可能浪费免费时长 四、总结 优势 一些编程初学者喜欢把编程的东西放在默认的C盘上导致出现如下图这样的情况 亦或者一些编程初学者一直安装不好编程软件的环境。 CloudStudio提供云端开发基于云端的开发环境无需安装任何软件。云端开发不占用自己电脑内存只需要通过浏览器就能够进行编程工作非常方便。 多语言支持CloudStudio 支持多种编程语言包括 C、C、C#、Java、Python、JavaScript、Go、R、Rust 等等因此适用性非常广泛。 模板开发更加轻松地创建和管理自己的项目让您的工作更加高效快捷。 提供常见问题的解决方案 可以在文档中列出一些常见的问题并提供解决方案以便用户更容易地解决问题。 丰富的插件和扩展Cloud Studio提供了丰富的插件和扩展可以根据用户需要进行定制。这些插件和扩展提供了各种功能例如代码自动补全、调试、版本控制、性能分析等以帮助开发者提高工作效率。 强大的协作与共享Cloud Studio支持团队协作和多人同时编辑多人可以在同一个项目中进行实时协作提高开发效率。同时Cloud Studio还提供了文件共享和版本控制功能方便团队成员之间的文件交流和管理。 云部署套件DeployKit 是一款运行于 Cloud Studio云端 IDE 的云函数部署插件支持多种框架一键部署至云函数同时支持自定义部署。便于帮助开发者快速部署项目到多个云厂商函数服务避免了部署过程中开发者需要深入了解各云厂商的部署细节的问题使得开发者专注于业务代码逻辑的实现即可。 建议 1.关于产品文档 总体而言文档还不够完善 ①增加视频演示添加视频演示可以帮助用户更好地了解产品的使用方法和功能。 ②完善应用开发文档目前只有JavaNode.jsFlutter可以增加其他语言的文档。 2.关闭网页但是项目还在运行 项目还在运行 Cloud Studio 每月赠送 3000 分钟的工作空间免费时长 但是对于一些新手用户关闭网页后忘记停止工作空间造成工作空间免费时长白白浪费。 因此需要提醒一下用户关闭网页后还需手动停止工作空间。