鄭州網(wǎng)站建設(shè)公司價(jià)格經(jīng)濟(jì)新聞最新消息財(cái)經(jīng)
陳老老老板🦸 👨?💻本文專欄:生活(主要講一下自己生活相關(guān)的內(nèi)容)
👨?💻本文簡(jiǎn)述:生活就像海洋,只有意志堅(jiān)強(qiáng)的人,才能到達(dá)彼岸。
👨?💻上一篇文章: 年度總結(jié)-你覺(jué)得什么叫生活?
👨?💻有任何問(wèn)題,都可以私聊我,在文章最后也可以加我的wx。感謝支持!
🦹我認(rèn)為人人都可以學(xué)好編程,我愿意成為你的領(lǐng)路人!
文章目錄🤴
- 一、前言👵
- 二、騰訊云`Cloud Studio`到底是什么🤴
- 1.業(yè)務(wù)角度
- 2.功能角度
- 三、騰訊云`Cloud Studio`出現(xiàn)的背景是什么🦸?♂?
- 1.從本地向“云”
- 2.`Cloud Studio`真正的優(yōu)勢(shì)
- 四、快速構(gòu)建React完成點(diǎn)餐H5頁(yè)面還原實(shí)操💇?♂?
- 1.進(jìn)行注冊(cè)并創(chuàng)建應(yīng)用
- 2.安裝 `antd-mobile`
- 3.安裝 `Less`與 `less-loader`
- 4.暴露 `webpack` 配置文件
- 5.更改config目錄中增加less樣式
- 6.安裝 normalize
- 7.上傳項(xiàng)目需要的素材
- 8.替換App.js主文件
- 9.運(yùn)行測(cè)試
- 10.上傳代碼倉(cāng)庫(kù)
- 五.總結(jié)
一、前言👵
最近在公司中時(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)!!