前言：

Cloud Studio是一個在線的云集成開發(fā)環(huán)境（IDE），可以讓開發(fā)人員在瀏覽器中輕松地開發(fā)、測試、調(diào)試和部署應(yīng)用程序。它提供了基于云的計算資源和工具，例如代碼編輯器、編譯器、調(diào)試器、版本控制系統(tǒng)和項目管理工具等，使開發(fā)人員可以在任何地點使用任何設(shè)備進行開發(fā)，而不需要在本地安裝軟件。CloudStudio還能夠集成多個云計算平臺（如AWS和Azure）和其他開發(fā)工具，以幫助開發(fā)人員更方便地進行云原生應(yīng)用程序的構(gòu)建和部署。

Cloud Studio 作為在線 IDE，包含代碼高亮、自動補全、Git 集成、終端等 IDE 的基礎(chǔ)功能，同時支持實時調(diào)試、插件擴展等，可以幫助開發(fā)者快速完成各種應(yīng)用的開發(fā)、編譯與部署工作。

??官網(wǎng)：https://cloudstudio.net/

一、操作指南

對于新手來說，產(chǎn)品文檔可以幫助我們更好地了解產(chǎn)品的功能和用途。如果不熟 CloudStudio 的使用方法，可能會遇到許多問題，這會導(dǎo)致浪費時間。因此，在使用CloudStudio 之前，我建議大家先看一下 產(chǎn)品文檔：

另外，該產(chǎn)品文檔提供了登錄與注冊、應(yīng)用開發(fā)?各種示例和圖解，這對于新手來說非常有幫助，它可以大大減少學(xué)習(xí)成本，更快地熟悉并掌握產(chǎn)品。?

看完了產(chǎn)品文檔，我們就去實踐一下吧：

二、使用Cloud Studio快速構(gòu)建React完成點餐H5頁面還原

1.使用空間模板

點擊空間模板，選擇全部模板，然后往下滑：

找到React：

?點擊后是這樣的，等待幾秒鐘即可：

?進入空間后，發(fā)現(xiàn)它在安裝一些東西，我們等待它安裝完成即可：

2.初始化項目

// 進入當(dāng)前目錄
cd ./ && 
// 設(shè)置port的環(huán)境變量
set port=3000 &&
// 導(dǎo)出port的環(huán)境變量
export PORT=3000 &&
// 相當(dāng)于 yarn install，安裝相關(guān)依賴
yarn &&
// 啟動開發(fā)環(huán)境
yarn start --port=3000

僅僅幾分鐘，我們的項目就初始化好了，對于其他項目，例如java項目，Node.js項目等等。只要有瀏覽器，就不需要準(zhǔn)備任何環(huán)境，不需要安裝任何軟件，只需要能夠聯(lián)網(wǎng)，就能在幾分種內(nèi)初始化一個項目，這對新技術(shù)的學(xué)習(xí)是非常高效的。

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' 后，項目會自動進行解構(gòu)操作。

完成命令之后，項目根目錄會出現(xiàn)一個config文件夾，里面是一些配置相關(guān)的腳本，也可以看到 package.json 中多了很多屬性值，如 "dependencies".

找到 config/webpack.config.js 文件，找到第60行左右，這塊是設(shè)置 css 相關(guān)的代碼。

?復(fù)制一下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)$/;

?繼續(xù)向下搜索sass，位置在 504 行左右，能夠找到以下代碼。

?和之前配置一樣，仿照sass的配置，進行l(wèi)ess的配置。

// 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重置的現(xiàn)代替代方案，可以為默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。

yarn add -D normalize.css@^8.0.1

(4).上傳項目需要的素材：?

以前上傳服務(wù)器代碼，需要使用 Scp 命令或者裝 Remote SSH 插件支持，Cloud Studio 可以很方便默認支持文件上傳與下載等常規(guī)的操作，與本地 IDE 體驗一致：

• 可以直接拖動文件到 IDE 編輯區(qū)域（本文使用方式）
• 右擊 IDE 編輯區(qū)域"上傳"

直接將?img?文件夾拖動到src目錄下即可。（點擊下載img壓縮包）

(5).替換App.js主文件：?

以下是點餐系統(tǒng)的主要業(yè)務(wù)代碼，復(fù)制到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.css"function App() {const [activeKey, setActiveKey] = useState('1')const tabbars = [{key: 'home',title: '點餐',icon: <AppOutline />,},{key: 'todo',title: '購物車',icon: <UnorderedListOutline />,badge: '5',},{key: 'sale',title: '餐牌預(yù)告',icon: <ExclamationShieldOutline />,},{key: '我的',title: '我的',icon: <UserOutline />,badge: Badge.dot,},]const back = () =>Toast.show({content: '歡迎進入點餐系統(tǒng)',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 className="App"><NavBar onBack={back} style={{background: '#F0F0F0',fontWeight: 'bold'}}>點餐</NavBar><div className='head-card'><Swiperstyle={{'--border-radius': '8px',}}autoplaydefaultIndex={1}>{items}</Swiper></div><div className='product-box'><SideBar activeKey={activeKey} onChange={setActiveKey}>{tabs.map(item => (<SideBar.Item key={item.key} title={item.key === '1' ? <div><div className='flex-center'><img style={{display: 'block',width: '16px',marginRight: '5px'}} src={ HotImg }></img><div>{ item.title }</div></div></div> : item.title} />))}</SideBar><div className='product-right'><div className='product-title'>熱銷</div><div className='product-list'>{productList.map((item, key) => {return (<div className='product-item'><div className='product-item-left'><img style={{display: 'block',width: '76px',marginRight: '5px'}} src={ item.img }></img><div className='product-item-left-info'><div><div className='product-item-left-info-name'>{ item.name }</div><div className='product-item-left-info-number'>月售{key + 1}0 贊{key * 5}</div></div><div className='product-item-left-info-price'>￥10</div></div></div><div className="cart"><img style={{display: 'block',width: '30px',marginRight: '5px'}} src={ CartImg } onClick = { () =>Toast.show({content: '添加購物車成功'}) }></img></div></div>)})}</div></div></div><TabBar>{tabbars.map(item => (<TabBar.Itemkey={item.key}icon={item.icon}title={item.title}badge={item.badge}/>))}</TabBar></div>);
}export default App;

在 src 目錄下，創(chuàng)建一個 index.less 文件，將以下 less 相關(guān)的代碼復(fù)制到該文件中即可。

.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;
}

復(fù)制完成后，在控制臺中輸入?yarn dev即可啟動該項目。

• Cloud Studio 內(nèi)置預(yù)覽插件，可以實時顯示網(wǎng)頁應(yīng)用，當(dāng)代碼發(fā)生改變之后，預(yù)覽窗口會自動刷新，即可在 Cloud Studio 內(nèi)實時開發(fā)調(diào)試網(wǎng)頁了
• 因為本項目是移動端H5的項目，所以需要打開“toggle device”按鈕查看樣式。
• 提供了二唯碼在手機端進行調(diào)試。

效果圖：

三、補充說明

1.其他項目開發(fā)

親愛的小伙伴們，正如我們之前所說的一樣，CloudStudio不僅可以幫助您快速搭建react項目，而且同樣支持Java、node.js、Flutter等多種項目類型，歡迎大家嘗試并體驗一下其他項目。

可以參考產(chǎn)品文檔里面的應(yīng)用開發(fā)：

2.工作空間免費時長

?Cloud Studio 團隊基于老用戶使用體驗角度和新用戶上手成本考慮，現(xiàn)實行每月贈送 3000 分鐘的工作空間免費時長 。當(dāng)月時長用完即止，未使用的時長不予保留和累加，下月刷新清零再給予 3000 分鐘免費時長；

?故此，我們在不使用產(chǎn)品的時候，需要點擊停止，不然可能浪費免費時長：

四、總結(jié)

優(yōu)勢：

一些編程初學(xué)者，喜歡把編程的東西放在默認的C盤上，導(dǎo)致出現(xiàn)如下圖這樣的情況：

亦或者一些編程初學(xué)者，一直安裝不好編程軟件的環(huán)境。

CloudStudio提供云端開發(fā)，基于云端的開發(fā)環(huán)境，無需安裝任何軟件。云端開發(fā)，不占用自己電腦內(nèi)存，只需要通過瀏覽器就能夠進行編程工作，非常方便。

多語言支持：CloudStudio 支持多種編程語言，包括 C、C++、C#、Java、Python、JavaScript、Go、R、Rust?等等，因此適用性非常廣泛。

模板開發(fā)：更加輕松地創(chuàng)建和管理自己的項目，讓您的工作更加高效快捷。

提供常見問題的解決方案：

可以在文檔中列出一些常見的問題，并提供解決方案，以便用戶更容易地解決問題。

豐富的插件和擴展：Cloud Studio提供了豐富的插件和擴展，可以根據(jù)用戶需要進行定制。這些插件和擴展提供了各種功能，例如代碼自動補全、調(diào)試、版本控制、性能分析等，以幫助開發(fā)者提高工作效率。

強大的協(xié)作與共享：Cloud Studio支持團隊協(xié)作和多人同時編輯，多人可以在同一個項目中進行實時協(xié)作，提高開發(fā)效率。同時，Cloud Studio還提供了文件共享和版本控制功能，方便團隊成員之間的文件交流和管理。

云部署套件：DeployKit?是一款運行于?Cloud Studio（云端 IDE）?的云函數(shù)部署插件，支持多種框架一鍵部署至云函數(shù)，同時支持自定義部署。便于幫助開發(fā)者快速部署項目到多個云廠商函數(shù)服務(wù)，避免了部署過程中開發(fā)者需要深入了解各云廠商的部署細節(jié)的問題，使得開發(fā)者專注于業(yè)務(wù)代碼邏輯的實現(xiàn)即可。

建議：

1.關(guān)于產(chǎn)品文檔

總體而言，文檔還不夠完善：

①增加視頻演示：添加視頻演示可以幫助用戶更好地了解產(chǎn)品的使用方法和功能。

②完善應(yīng)用開發(fā)文檔：目前只有Java，Node.js，Flutter，可以增加其他語言的文檔。

2.關(guān)閉網(wǎng)頁，但是項目還在運行

?項目還在運行：

Cloud Studio 每月贈送 3000 分鐘的工作空間免費時長 ，但是對于一些新手用戶，關(guān)閉網(wǎng)頁后忘記停止工作空間，造成工作空間免費時長白白浪費。

因此，需要提醒一下用戶，關(guān)閉網(wǎng)頁后，還需手動停止工作空間。