一、引言??

? 隨著互聯(lián)網(wǎng)的的普及和發(fā)展，越來(lái)越多的程序開(kāi)發(fā)項(xiàng)目逐漸在向云端轉(zhuǎn)移，得益于互聯(lián)網(wǎng)的傳輸穩(wěn)定以及安全高效，使得開(kāi)發(fā)人員可以在任何地方進(jìn)行開(kāi)發(fā)，并且可以方便與其他人員進(jìn)行協(xié)同開(kāi)發(fā)，共同推進(jìn)項(xiàng)目進(jìn)度。其次，隨著云服務(wù)技術(shù)的不斷發(fā)展，有很多的開(kāi)發(fā)工具和開(kāi)發(fā)環(huán)境別遷移到云端，云服務(wù)商能夠提供穩(wěn)定、高效且安全的云服務(wù)，滿足程序員隨時(shí)隨地在云端進(jìn)行開(kāi)發(fā)、測(cè)試、部署、調(diào)試等一系列工作流程。

---

? 這些工具可以在云端創(chuàng)建和管理項(xiàng)目，提供在線編輯和調(diào)試等功能，使得開(kāi)發(fā)過(guò)程更加高效和便捷。從傳統(tǒng)開(kāi)發(fā)模式到在線開(kāi)發(fā)方式的轉(zhuǎn)變，傳統(tǒng)開(kāi)發(fā)使得一個(gè)團(tuán)隊(duì)不需要在同一地方進(jìn)行協(xié)作，而在線開(kāi)發(fā)使得團(tuán)隊(duì)協(xié)作的方式發(fā)生了改變，團(tuán)隊(duì)成員可以在不同的地點(diǎn)進(jìn)行協(xié)作，會(huì)更加靈活，能夠適應(yīng)現(xiàn)代快速變化的項(xiàng)目需求。

---

? 伴隨著開(kāi)發(fā)的方式轉(zhuǎn)變，開(kāi)發(fā)人員不再需要配置本地端的開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具，大大減輕了開(kāi)發(fā)環(huán)境，化繁為簡(jiǎn)，變得更加簡(jiǎn)單和方便。將開(kāi)發(fā)環(huán)境下沉，為開(kāi)發(fā)者們提供了便捷，無(wú)需進(jìn)行復(fù)雜的配置。接下來(lái)，向大家介紹一個(gè)用于編寫(xiě)、運(yùn)行和調(diào)試代碼的云IDE—— 騰訊云Cloud Studio🌈

二、什么是騰訊云 Cloud Studio🔍

騰訊云Cloud Studio是一個(gè)基于云端的集成開(kāi)發(fā)環(huán)境（IDE），它允許開(kāi)發(fā)人員在云端上編寫(xiě)、編譯、調(diào)試和部署代碼。Cloud Studio提供豐富的功能，包括：

• 支持多種編程語(yǔ)言，包括Python、Java、JavaScript、PHP和Go
• 內(nèi)置代碼編輯器、調(diào)試器和終端
• 支持Git和Subversion等版本控制系統(tǒng)
• 支持云端資源管理，包括云服務(wù)器、云存儲(chǔ)和云數(shù)據(jù)庫(kù)
• 支持自動(dòng)化部署

---

Cloud Studio是一個(gè)強(qiáng)大的開(kāi)發(fā)工具，它可以幫助開(kāi)發(fā)人員提高開(kāi)發(fā)效率和質(zhì)量。它適用于所有類(lèi)型的開(kāi)發(fā)人員，包括初學(xué)者、專(zhuān)業(yè)開(kāi)發(fā)人員和企業(yè)開(kāi)發(fā)人員。

三、Cloud Studio優(yōu)點(diǎn)和功能🌈

打造了云端開(kāi)發(fā)環(huán)境：加速開(kāi)發(fā)流程配置化，用配置定義云端開(kāi)發(fā)環(huán)境，提升開(kāi)發(fā)效率，擁有更彈性的云上開(kāi)發(fā)資源。

推出了AI代碼助手：直接在 Cloud Studio 里喚起 AI代碼助手，讓你擁有專(zhuān)業(yè)的研發(fā)伙伴，與您一起更高質(zhì)量的完成編碼工作，事半功倍。

推進(jìn)了開(kāi)發(fā)協(xié)作：邀請(qǐng)伙伴一起進(jìn)入開(kāi)發(fā)，解決開(kāi)發(fā)問(wèn)題，提高開(kāi)發(fā)效率。 或者您也可以創(chuàng)建團(tuán)隊(duì)

加速了部署應(yīng)用：一鍵部署，智能識(shí)別 30+ 主流前后端框架。本地 IDE ，也可以體驗(yàn)，我們已全面支持 VS Code 市場(chǎng)插件。

探索未來(lái) 協(xié)作編碼的無(wú)限可能🌟

四、Cloud Studio初體驗(yàn)（注冊(cè)篇）🎆

注冊(cè)入口👉https://cloudstudio.net/

🧭導(dǎo)航至此界面，點(diǎn)擊“注冊(cè)/登錄”。

🔎提供了以下三種注冊(cè)或登錄方式。這邊采用“微信”的注冊(cè)登錄方式。

🔓打開(kāi)微信“掃一掃”的功能，掃碼授權(quán)即可注冊(cè)登錄。

?? 微信授權(quán)后，界面即刻跳轉(zhuǎn)至如下界面，注冊(cè)成功。

五、Cloud Studio實(shí)戰(zhàn)演練（實(shí)戰(zhàn)篇）🔬

1. 初始化工作空間

初始化React 的工作空間—React 框架模板

工作開(kāi)發(fā)空間初始化界面，動(dòng)畫(huà)演示。

2. 安裝 antd-mobile

Ant Design Mobile是Ant Design的移動(dòng)規(guī)范的React實(shí)現(xiàn)，是一個(gè)基于Preact/React/React Native的UI組件庫(kù)。它具有高度可配置的UI樣式，拓展性更強(qiáng)，可以輕松適應(yīng)各類(lèi)產(chǎn)品風(fēng)格，并服務(wù)于螞蟻及口碑無(wú)線業(yè)務(wù)。

yarn add antd-mobile@^5.32.0

3. 安裝 less 和 less-loader

• Less是一種CSS預(yù)處理器，它增加了變量、函數(shù)、嵌套和其他高級(jí)功能，使得CSS更易于擴(kuò)展和組織。
• Less-loader是Webpack的一個(gè)模塊加載器，它的作用是在Webpack中處理和轉(zhuǎn)換Less文件，將Less代碼編譯成CSS代碼，并加載到頁(yè)面中。
• 使用Less-loader之前，需要先安裝less和less-loader依賴(lài)包。

yarn add -D less@^3.12.2 less-loader@^7.0.1

4. 暴露 webpack 配置文件

yarn eject

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

5. 修改 config/webpack.config.js 文件

找到 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，位置在 510 行左右，能夠找到以下代碼。

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

// less
{test: lessRegex,  // 有改動(dòng)exclude: lessModuleRegex,  // 有改動(dòng)use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},'less-loader'  // 有改動(dòng)),sideEffects: true,
},
{test: lessModuleRegex,  // 有改動(dòng)use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'  // 有改動(dòng)),
},

這樣就完成了webpack.config.js配置less，可以在項(xiàng)目中使用less樣式了。

6. 安裝 normalize

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

yarn add -D normalize.css@^8.0.1

7. 上傳項(xiàng)目需要的素材

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

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

直接將 img 文件夾拖動(dòng)到src目錄下即可。（點(diǎn)擊下載img壓縮包）

---

如下圖演示操作。

8. 替換App.js主文件

以下是點(diǎn)餐系統(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: '點(diǎn)餐',icon: <AppOutline />,},{key: 'todo',title: '購(gòu)物車(chē)',icon: <UnorderedListOutline />,badge: '5',},{key: 'sale',title: '餐牌預(yù)告',icon: <ExclamationShieldOutline />,},{key: '我的',title: '我的',icon: <UserOutline />,badge: Badge.dot,},]const back = () =>Toast.show({content: '歡迎進(jìn)入點(diǎn)餐系統(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: '熱銷(xiāo)' },{ key: '2', title: '套餐' },{ key: '3', title: '米飯' },{ key: '4', title: '燒菜' },{ key: '5', title: '湯' },{ key: '6', title: '主食' },{ key: '7', title: '飲料' },]const productName = ['小炒黃牛肉','芹菜肉絲炒香干','番茄炒雞蛋','雞湯','酸菜魚(yú)','水煮肉片','土豆炒肉片','孜然肉片','宮保雞丁','麻辣豆腐','香椿炒雞蛋','豆角炒肉']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'}}>點(diǎn)餐</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'>熱銷(xiāo)</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: '添加購(gòu)物車(chē)成功'}) }></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;

9. 創(chuàng)建indes.less文件并上傳代碼

在 src 目錄下，創(chuàng)建一個(gè) 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ù)制完成后，在控制臺(tái)中輸入 yarn dev即可啟動(dòng)該項(xiàng)目。

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

10. 啟動(dòng)該項(xiàng)目

yarn dev

11. 清理實(shí)驗(yàn)

• 先停止項(xiàng)目

• 再刪除項(xiàng)目

六、Cloud Studio體驗(yàn)心得🫂

所見(jiàn)即所得，騰訊云 Cloud Studio泰褲辣

利用云端在線開(kāi)發(fā)環(huán)境，為開(kāi)發(fā)者提供便利的同時(shí)，業(yè)縮短了項(xiàng)目上線的成本。真正做到了“降本增效”。

🔍方便的訪問(wèn)：由于Cloud Studio是基于瀏覽器的，用戶(hù)可以從任何地方的設(shè)備上訪問(wèn)它，只需有網(wǎng)絡(luò)連接和兼容的瀏覽器即可。這使得團(tuán)隊(duì)成員可以輕松地在不同的位置進(jìn)行協(xié)作和編碼。

??集成的工具和功能：Cloud Studio通常提供了一系列內(nèi)置的工具和功能，如代碼編輯器、調(diào)試器、版本控制系統(tǒng)（如Git）、終端等。這些集成的工具可以提高開(kāi)發(fā)效率，減少切換不同工具之間的時(shí)間和困擾。

🤝協(xié)作和共享：Cloud Studio通常支持多人協(xié)作，團(tuán)隊(duì)成員可以同時(shí)在同一個(gè)項(xiàng)目中進(jìn)行編輯和調(diào)試。此外，用戶(hù)可以輕松地共享代碼和項(xiàng)目，方便團(tuán)隊(duì)成員之間的交流和反饋。

📢 靈活的配置和擴(kuò)展性：一些Cloud Studio平臺(tái)允許用戶(hù)根據(jù)自己的需求進(jìn)行自定義配置，例如選擇喜歡的主題、插件和工具集。這使得用戶(hù)能夠根據(jù)自己的偏好和需求來(lái)打造一個(gè)適合自己的開(kāi)發(fā)環(huán)境。

七、總結(jié)🪢

? 每個(gè)人對(duì)Cloud Studio的體驗(yàn)可能會(huì)有所不同，這取決于個(gè)人的需求、習(xí)慣和使用場(chǎng)景。有些人可能喜歡在線編碼和協(xié)作的便利性，而另一些人可能更喜歡本地安裝的IDE。如果你也對(duì)Cloud Studio感興趣，我建議你親自嘗試一下，看看它是否適合你的工作流程和需求。

歡迎大家一起探索 Cloud Studio社區(qū)更多的功能，為工作中進(jìn)行賦能！

八、使用過(guò)程中常見(jiàn)錯(cuò)誤及解決辦法?

問(wèn)題① dev腳本啟用失敗?

ERROR in ./src/index.js 9:2
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const root = ReactDOM.createRoot(document.getElementById('root'));
| root.render(
>   <React.StrictMode>
|     <App />
|   </React.StrictMode>webpack 5.88.2 compiled with 1 error in 352 ms

💢原因分析

“dev” 腳本用于在開(kāi)發(fā)過(guò)程中啟動(dòng)開(kāi)發(fā)服務(wù)器、監(jiān)視文件變化并重新編譯代碼、啟動(dòng)開(kāi)發(fā)工具等。

因?yàn)楸卷?xiàng)目是采用React框架，所以要使用React腳手架（如Create React App）

?解決：在pakage.json配置文件，定位到scripts，添加如下命令。

"dev": "react-scripts start"

問(wèn)題② img未添加alt屬性?

WARNING in [eslint] 
src/App.jsLine 55:7:    img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-textLine 117:17:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-textLine 136:23:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-textLine 150:23:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-textwebpack compiled with 1 warnin

?原因分析及解決辦法🌈：

這個(gè)警告是由ESLint插件jsx-a11y/alt-text引起的，它要求在<img>元素中添加alt屬性，以提供有意義的文本描述或?yàn)榭兆址员硎狙b飾性圖像。

1. 找到報(bào)錯(cuò)文件src/App.js
2. 在文件中找到相應(yīng)的行號(hào)，根據(jù)警告信息，這些行分別是55、117、136和150。
3. 對(duì)于每個(gè)報(bào)錯(cuò)的<img>元素，為其添加alt屬性。

---

如下圖所示。

歡迎使用騰訊云 Cloud Studio 開(kāi)啟您的云端之旅??

九、參考鏈接

🔴騰訊云活動(dòng)社區(qū)

🟡Cloud Studio_在線編程_在線IDE_WebIDE_CloudIDE_VS Code-騰訊云

🟢騰訊云 Cloud Studio 在線開(kāi)發(fā)平臺(tái)

🔵騰訊云 Cloud Studio 實(shí)戰(zhàn)訓(xùn)練營(yíng)

🔚完結(jié)🔚