陳老老老板🦸 👨?💻本文專欄：生活（主要講一下自己生活相關(guān)的內(nèi)容）
👨?💻本文簡(jiǎn)述：生活就像海洋,只有意志堅(jiān)強(qiáng)的人,才能到達(dá)彼岸。
👨?💻上一篇文章： 年度總結(jié)-你覺(jué)得什么叫生活？
👨?💻有任何問(wèn)題，都可以私聊我，在文章最后也可以加我的wx。感謝支持！
🦹我認(rèn)為人人都可以學(xué)好編程，我愿意成為你的領(lǐng)路人！

一、前言👵

最近在公司中時(shí)常和一些大佬在討論一些在線編程工具這個(gè)事情，也是親自嘗試了很多的產(chǎn)品，也很幸運(yùn)的參加了騰訊云Cloud Studio實(shí)戰(zhàn)訓(xùn)練營(yíng)，也是蠻有緣分的，既然有緣那就細(xì)致的給大家講講我的使用感受與實(shí)操示例。一句話來(lái)說(shuō)就是：小母牛坐飛機(jī)–牛逼上天了！！！ 依然是老三套結(jié)構(gòu)：是什么、為什么、怎么做、來(lái)講講！

二、騰訊云Cloud Studio到底是什么🤴

1.業(yè)務(wù)角度

說(shuō)明：簡(jiǎn)單的理解，騰訊云Cloud Studio就是一個(gè)線上編程工具，哇塞！是不是很牛，再也不用為配置不明白而煩惱了，再也不用因?yàn)椴寮姹径鵁懒?#xff0c;會(huì)讓你覺(jué)得開(kāi)發(fā)Very Easy！！

• Cloud Studio 是基于瀏覽器的集成式開(kāi)發(fā)環(huán)境（IDE），為開(kāi)發(fā)者提供了一個(gè)永不間斷的云端工作站。用戶在使用 Cloud Studio 時(shí)無(wú)需安裝，隨時(shí)隨地打開(kāi)瀏覽器就能在線編程。

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

2.功能角度

說(shuō)明：明白是線上編程工具就可以知道，你本地弄得環(huán)境都已經(jīng)為你準(zhǔn)備好，你想的到的它都能做到，一句話你想要的他都有，東西實(shí)在是太多了。

• 快速啟動(dòng)項(xiàng)目：使用Cloud Studio的預(yù)置環(huán)境，您可以直接創(chuàng)建對(duì)應(yīng)類型的工作空間，快速啟動(dòng)項(xiàng)目進(jìn)入開(kāi)發(fā)狀態(tài)，無(wú)需進(jìn)行繁瑣的環(huán)境配置。

• 實(shí)時(shí)調(diào)試網(wǎng)頁(yè)：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è)了。

• 遠(yuǎn)程訪問(wèn)云服務(wù)器：Cloud Studio 支持您連接自己的云服務(wù)器，這樣就可以在編輯器中查看云服務(wù)器上的文件，進(jìn)行在線編程和部署工作。

三、騰訊云Cloud Studio出現(xiàn)的背景是什么🦸?♂?

說(shuō)明：很喜歡Cloud Studio的標(biāo)題：云端開(kāi)發(fā) 化繁為簡(jiǎn),他們也確實(shí)做到了，真的把需要開(kāi)發(fā)所做的一切準(zhǔn)備工作都集中在網(wǎng)頁(yè)上，你要做的就是選擇哪個(gè)環(huán)境，簡(jiǎn)直愛(ài)不釋手！

1.從本地向“云”

說(shuō)明：可能很多小伙伴不太明白為什么現(xiàn)在很多東西都是再往“云”上發(fā)展，上云代表不再會(huì)有本地資源的束縛，無(wú)論什么時(shí)間、地點(diǎn)，只要有網(wǎng)就可以干你想干的事情。

云技術(shù)的不斷發(fā)展，上“云”將會(huì)大大降低成本，減少硬件設(shè)備的采購(gòu)，而且更加穩(wěn)定不會(huì)出現(xiàn)斷電等情況，而且整體的效率更高，不再是最開(kāi)始的單一在同一辦公地點(diǎn)的辦公方式，可以采用進(jìn)行同時(shí)的線上編程方式，一個(gè)新的電腦不用配置一樣可以編程，簡(jiǎn)直不要太爽。無(wú)拘無(wú)束，再也不用因?yàn)殡娔X配置不行而不能寫(xiě)代碼而發(fā)愁了。

2.Cloud Studio真正的優(yōu)勢(shì)

• 1.云端開(kāi)發(fā)環(huán)境：一鍵秒開(kāi)、全持久化、預(yù)置環(huán)境及內(nèi)置開(kāi)發(fā)工具，跨團(tuán)隊(duì)無(wú)縫復(fù)制和共享，讓開(kāi)發(fā)化繁為簡(jiǎn)。
• 2.支持多編程語(yǔ)言：包括C、C++、C# 、Java、JavaScript、Python、Go、Rust 等幾乎全平臺(tái)的主流開(kāi)發(fā)語(yǔ)言。
• 3.支持多端開(kāi)發(fā)：可以支持前端、后端、移動(dòng)端開(kāi)發(fā)。
• 4.支持AI代碼助手：可以在線編程 · 輔助開(kāi)發(fā)，使用 AI 代碼助手在 Cloud Studio 中編寫(xiě)代碼。代碼自動(dòng)補(bǔ)全、代碼糾錯(cuò)、代碼AI評(píng)審、單元測(cè)試生成功能等。
• 5.支持協(xié)作開(kāi)發(fā)：可以組建自己的團(tuán)隊(duì)實(shí)現(xiàn)實(shí)時(shí)開(kāi)發(fā)。
• 6.支持DeployKit云部署：支持多種框架一鍵部署至云函數(shù)，同時(shí)支持自定義部署。 便于幫助開(kāi)發(fā)者快速部署項(xiàng)目到多家云廠商函數(shù)服務(wù)，讓開(kāi)發(fā)者專注于代碼邏輯的實(shí)現(xiàn)。

四、快速構(gòu)建React完成點(diǎn)餐H5頁(yè)面還原實(shí)操💇?♂?

1.進(jìn)行注冊(cè)并創(chuàng)建應(yīng)用

說(shuō)明： 可以使用微信直接進(jìn)行創(chuàng)建哦！，點(diǎn)擊右上角進(jìn)行創(chuàng)建應(yīng)用，選擇React框架，一鍵部署環(huán)境，超級(jí)快。現(xiàn)在終端輸入以下命令嘗試創(chuàng)建一個(gè)新主機(jī)，在Ctrl + z就可以退出：

// 進(jìn)入當(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 &&
// 啟動(dòng)開(kāi)發(fā)環(huán)境
yarn start --port=3000

2.安裝 antd-mobile

說(shuō)明： 是由螞蟻金融團(tuán)隊(duì)推出的一個(gè)開(kāi)源的react組件庫(kù)，antd-mobile 支持基于 Tree Shaking 的按需加載。安裝完查看package.json 查看 antd-mobile是否安裝成功，成功可以會(huì)如圖片所示。

注：版本要對(duì)5.32.0

安裝命令：

$ yarn add antd-mobile@^5.32.0
# or
$ npm install --save antd-mobile@^5.32.0

實(shí)操演示：

3.安裝 Less與 less-loader

說(shuō)明：Less相信一些前端開(kāi)發(fā)的小伙伴來(lái)說(shuō)必不可少的組件，這里先下載Less做開(kāi)發(fā)準(zhǔn)備。依然是查看package.json 看其中的devDependencies是否安裝成功。

注：版本要對(duì)3.12.2 與7.0.1

安裝命令：

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

實(shí)操演示：

4.暴露 webpack 配置文件

安裝命令：

npm run eject

實(shí)操演示：輸入完要注意需要再次輸入y，進(jìn)行下一步

注：發(fā)現(xiàn)報(bào)錯(cuò)，因?yàn)槲覀兪褂媚_手架創(chuàng)建一個(gè)項(xiàng)目的時(shí)候，自動(dòng)給我們?cè)黾恿艘粋€(gè).gitignore文件，解決方案：我們本地卻沒(méi)有文件倉(cāng)庫(kù)，這就需要在終端輸入如下命令，用git將項(xiàng)目添加到我們的本地倉(cāng)庫(kù)。

安裝命令：

#先創(chuàng)建git
git config --global user.email "chenlaoban@qq.com" 
git config --global user.name "clb"
#在進(jìn)行提交代碼
gitadd .
git commit -m 'up'
#再執(zhí)行
npm run eject  

執(zhí)行完命令就會(huì)發(fā)現(xiàn)安裝成功

5.更改config目錄中增加less樣式

說(shuō)明：這里需要增加一些less樣式

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

將這部分更改為：就是新增最下面兩行l(wèi)ess樣式

// 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)$/;

（2）在509行，看到sass配置，在549行下增加less配置。有可能行號(hào)不一樣，教大家一個(gè)便捷方法 ctrl + f進(jìn)行搜索extensions .module.scss or .module.sass，就能直接找到了。

// 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)),
},

實(shí)操演示：

6.安裝 normalize

說(shuō)明：Normalize.css 是CSS重置的現(xiàn)代替代方案，可以為默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。安裝完也是看package.json中devDependencies有沒(méi)有normalize.css

注：版本為8.0.1

安裝命令：

yarn add -D normalize.css@^8.0.1

實(shí)操演示：

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

說(shuō)明：支持兩種上傳方式：

• 直接拖拽
• 右擊 IDE 編輯區(qū)域"上傳"

實(shí)操演示：

8.替換App.js主文件

說(shuō)明：只有樣式是不行的，還需要主代碼的；
（1）替換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)物車',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: '熱銷' },{ 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'>熱銷</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)物車成功'}) }></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;

實(shí)操演示：

（2）在 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;}

實(shí)操演示：

9.運(yùn)行測(cè)試

說(shuō)明： 執(zhí)行命令，在點(diǎn)擊內(nèi)置瀏覽即可運(yùn)行

// 進(jìn)入當(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 &&
// 啟動(dòng)開(kāi)發(fā)環(huán)境
yarn start --port=3000

實(shí)操演示：

10.上傳代碼倉(cāng)庫(kù)

說(shuō)明：我們可以將寫(xiě)完的代碼上傳到騰訊云的coding中，地址：https://chengxuyuanzhouzhou.coding.net/login/relation/registion?redirect=%2Fuser%2Fprojects
(1)注冊(cè)登錄，選擇dev項(xiàng)目，并輸入信息

（2）進(jìn)行推送，先點(diǎn)左側(cè)源代碼管理，在點(diǎn)publish Branch 再點(diǎn)Publish to CODING

(3) 這樣在倉(cāng)庫(kù)中就能看到提交的代碼了,大功告成！！

五.總結(jié)

學(xué)習(xí)一項(xiàng)新的東西，最開(kāi)始是辛苦的、無(wú)趣的，但是完成之后才會(huì)覺(jué)得這是一件最有成就感的事情，經(jīng)過(guò)不斷的摸索與嘗試，不斷的提升自己，這才是一個(gè)程序員該做的事情。

Cloud Studio的使用給了我非常不錯(cuò)的體驗(yàn)，在多個(gè)線上編程平臺(tái)中有更多的優(yōu)點(diǎn)、更好的體驗(yàn)。Cloud Studio可以非常容易的構(gòu)建React框架，直接在線上進(jìn)行開(kāi)發(fā)，而且提供了特有的coding倉(cāng)庫(kù)與交流平臺(tái)。

個(gè)人體驗(yàn)：整體可以說(shuō)是小母牛翻跟頭-一次比一次牛逼！

• 交互體驗(yàn)不錯(cuò)，響應(yīng)很快；
• UI設(shè)計(jì)很豐富，沒(méi)有特別小、難以點(diǎn)擊等情況
• 功能十分強(qiáng)大，構(gòu)建框架特別方便
• 支持協(xié)同工作，真的挺不錯(cuò)的，效率更高了
• 對(duì)小白還是很友好的，引導(dǎo)很不錯(cuò)

無(wú)論在職開(kāi)發(fā)人員還是初學(xué)者都建議嘗試一下，挺有趣的體驗(yàn)！！

騰訊云Cloud Studio-云端開(kāi)發(fā) 化繁為簡(jiǎn)