目錄

?編輯

一、前言

1、什么是騰訊云 Cloud Studio

2、本文實驗介紹

二、前期準(zhǔn)備工作

1、注冊 Cloud Studio

?2、初始化工作空間

三、開發(fā)一個簡版的點餐系統(tǒng)頁面

1、安裝依賴

1.1、安裝 antd-mobile

1.2、安裝 less 和 less-loader

1.3、暴露 webpack 配置文件

1.4、安裝 normalize

?1.5、上傳項目需要的素材

1.6、替換App.js主文件

2、、發(fā)布到倉庫

四、開發(fā)空間管理

五、總結(jié)

一、前言

1、什么是騰訊云 Cloud Studio

Cloud Studio?是基于“瀏覽器”的集成式開發(fā)環(huán)境（IDE），為開發(fā)者提供穩(wěn)定的云端工作站，在使用 Cloud Studio 時無需安裝，打開瀏覽器即可快速啟動和開發(fā)項目，底層資源可以自動彈性擴(kuò)縮，極大地節(jié)省成本，低代碼開發(fā)省時又省力。

• 基于 Web 端的代碼編輯器，包含代碼高亮、自動補全、Git 集成、終端等 IDE 的基礎(chǔ)功能，同時支持實時調(diào)試、插件擴(kuò)展等，提升開發(fā)、編譯與部署工作效率 ;

• 支持遠(yuǎn)程訪問云服務(wù)器，為騰訊云 SCF 行業(yè)用戶提供開發(fā)-測試-部署完整閉環(huán)的云原生開發(fā)體驗 ;

2、本文實驗介紹

我們經(jīng)常會遇到遠(yuǎn)程辦公的場景，下面用云 IDE Cloud Studio 快速搭建，并開發(fā)還原一個移動端 React H5 的簡版點餐系統(tǒng)頁面，從 0 到 1 體驗云 IDE 給我們帶來的優(yōu)勢，不需要裝各種環(huán)境，簡單易用，開箱即可上手。

點餐界面

二、前期準(zhǔn)備工作

1、注冊 Cloud Studio

準(zhǔn)備好素材圖（如首頁的banner、食物圖片等），然后點擊鏈接跳轉(zhuǎn)到官網(wǎng)，并點擊“注冊/登錄”。

?其中 Cloud Studio 非常方便，提供了三種注冊方式：

1、使用 CODING 賬號授權(quán)注冊/登錄

2、使用微信授權(quán)注冊/登錄

3、使用 GitHub 授權(quán)注冊/登錄

?我選的是 CODING ，需要輸入對應(yīng)的團(tuán)隊域名前綴

輸入域名之后，會出現(xiàn)以下界面?，選擇你的 CODING 賬號方式，進(jìn)行掃碼登錄。?

?2、初始化工作空間

進(jìn)入之后，會出現(xiàn)以下界面，Cloud Studio 提供了許多模版，例如框架模版、云原生模版、建站模版等，同時 Cloud Studio 也對所有新老用戶每月贈送 3000 分鐘的工作空間免費時長。

?

找到 React 框架模板點擊進(jìn)去，即可開始初始化一個 React 的工作空間，等待云 IDE 初始化完畢。

?

?

在初始化的過程中，可以看到左側(cè)代碼后，控制臺會安裝依賴及啟動一個 React 簡單的模板項目。

?

初始化完畢之后，在我們的右側(cè)，可以看到一個實時預(yù)覽的預(yù)覽界面，然后在下面的控制臺輸入以下指令。

// 進(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 &&
// 啟動開發(fā)環(huán)境
yarn start --port=3000

?

到此，我們發(fā)現(xiàn)如果用一臺新主機(jī)，只要有瀏覽器，就不需要準(zhǔn)備任何環(huán)境，不需要安裝任何軟件，只需要能夠聯(lián)網(wǎng)，就能在幾分種內(nèi)初始化一個 React 項目，這個效率是非常高的。

三、開發(fā)一個簡版的點餐系統(tǒng)頁面

標(biāo)題是為了開發(fā)一個 React H5 的頁面，為了快速開發(fā)，通常會使用到UI組件庫，這里我們使用的是 antd-mobile UI庫（antd-mobile 是 Ant Design 的移動規(guī)范的 React 實現(xiàn)）。

1、安裝依賴

1.1、安裝 antd-mobile

yarn add antd-mobile@^5.32.0# 或者npm install --save antd-mobile@^5.32.0

?

1.2、安裝 less 和 less-loader

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

注意：這里不要安裝為高版本，項目會啟動失敗

?

1.3、暴露 webpack 配置文件

注意：在webpack.config.js中進(jìn)行配置，這樣進(jìn)行配置需要暴露出React的config配置文件，警告該操作不可逆

npm run eject

?

輸入 'y' 后，項目會自動進(jìn)行解構(gòu)操作。

完成命令之后，項目根目錄會出現(xiàn)一個config文件夾，找到 config/webpack.config.js 文件，按Ctrl + F 查找關(guān)鍵字? “style files”?

?

?將上圖的70行到73行代碼改成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)$/;

在查找框中輸入 “sassRegex”? 能夠找到以下代碼。

?和之前配置一樣，仿照sass的配置，進(jìn)行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樣式了。

1.4、安裝 normalize

yarn add -D normalize.css@^8.0.1

?1.5、上傳項目需要的素材

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

?1、可以直接拖動文件到 IDE 編輯區(qū)域

2、右擊 IDE 編輯區(qū)域"上傳"

直接將?img 文件夾拖動到src目錄下即可。

1.6、替換App.js主文件

打開src/App.js 文件，以下是點餐系統(tǒng)的主要業(yè)務(wù)代碼，直接CV替換即可。

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: '歡迎進(jì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 = ['小炒黃牛肉','芹菜肉絲炒香干','番茄炒雞蛋','雞湯','酸菜魚','水煮肉片','土豆炒肉片','孜然肉片','宮保雞丁','麻辣豆腐','香椿炒雞蛋','豆角炒肉']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 start?即可啟動該項目。

2、、發(fā)布到倉庫

發(fā)布前，我們需要填寫README.md文件。

# 項目說明這是一個用 IDE [Cloud Studio](https://www.cloudstudio.net/?utm=csdn) 快速搭建，并開發(fā)還原一個移動端 React H5 的簡版點餐系統(tǒng)頁面，從 0 到 1 體驗云 IDE 給我們帶來的優(yōu)勢，不需要裝各種環(huán)境，簡單易用，開箱即可上手。## 相關(guān)技術(shù)棧React + less + webpack## 項目運行yarn install
yarn start

在左邊功能菜單區(qū)找到“源代碼管理”，使用 git init 進(jìn)行倉庫初始化。

輸入需要提交的 message 信息，再點擊"Commit"進(jìn)行倉庫提交。

四、開發(fā)空間管理

在我們的控制臺這里可以管理所有使用的工作空間，其中右側(cè)的按鈕可以進(jìn)行升級配置、設(shè)置、刪除、開始\停止操作。

五、總結(jié)

Cloud Studio特點

• 基于 Web 端的代碼編輯器，包含代碼高亮、自動補全、Git 集成、終端等 IDE 的基礎(chǔ)功能，同時支持實時調(diào)試、插件擴(kuò)展等，提升開發(fā)、編譯與部署工作效率 。
• 支持遠(yuǎn)程訪問云服務(wù)器，為騰訊云 SCF 行業(yè)用戶提供開發(fā)-測試-部署完整閉環(huán)的云原生開發(fā)體驗 。
• 自研多款插件以滿足開發(fā)需求，例如協(xié)作插件、自定義模板插件、預(yù)覽插件、部署插件等，助力施展編程潛能。

本篇文章主要是引導(dǎo)大家如何使用 Cloud Studio 進(jìn)行云編程，并且動手使用云 IDE Cloud Studio 快速搭建，并開發(fā)還原一個移動端 React H5 的簡版點餐系統(tǒng)頁面。也歡迎大家一起探索 Cloud Studio 更多的功能，為工作中進(jìn)行賦能！