【騰訊云 Cloud Studio 實戰(zhàn)訓(xùn)練營】新手小試使用Cloud Studio 搭建移動端 H5 頁面（Vue框架）
代碼開發(fā)隨著云計算技術(shù)的不斷發(fā)展，云 IDE 也應(yīng)運而生。騰訊云與國內(nèi)領(lǐng)先的一站式軟件研發(fā)平臺CODING聯(lián)合推出了一款完全基于云端的 IDE：Cloud Studio，實現(xiàn)了Coding Anytime Anywhere。Cloud Studio是基于瀏覽器的集成式開發(fā)環(huán)境（IDE），為開發(fā)者提供了一個穩(wěn)定的云端工作站。用戶在使用Cloud Studio時無需安裝，隨時隨地打開瀏覽器就能使用。其功能包含代碼高亮、自動補全、Git集成、終端等IDE的基礎(chǔ)功能，同時支持實時調(diào)試、插件擴展等，可以幫助開發(fā)者快速完成各種應(yīng)用的開發(fā)、編譯與部署工作。
Cloud Studio申請地址：cloudstudio.net/
注冊登錄：這里注冊和登錄Cloud Studio非常方便，提供了三種注冊方式。
選擇模板：Cloud Studio控制臺中羅列了常見的集成開發(fā)環(huán)境，支持了40+的多種模板（框架模板、云原生模板、建站模板），單擊所需模板卡片即可進入對應(yīng)環(huán)境中，也可以選擇新建工作空間中的云服務(wù)器模式，連接云服務(wù)器進行開發(fā)環(huán)境搭建。
這里我們選擇Vue來實現(xiàn)，Vue是一款用于構(gòu)建用戶界面的JavaScript框架，它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，并提供了一套聲明式的、組件化的編程模型，具有豐富的、可漸進式集成的生態(tài)系統(tǒng)，可以根據(jù)應(yīng)用規(guī)模在庫和框架間切換自如，幫助你高效地開發(fā)用戶界面。無論是簡單還是復(fù)雜的界面，Vue都可以勝任。
點擊Vue.js模板卡片，進入集成環(huán)境加載頁面，加載成功后即可進入開發(fā)環(huán)境進行編程。
點擊后做個實名認證后加載IDE界面并自動打開README預(yù)覽界面，整個IDE開發(fā)環(huán)境布局與VScode基本一致。
啟動后當(dāng)前路徑：/workspace/vuepress-deploy
當(dāng)前用戶：root
當(dāng)前磁盤空間：7G
當(dāng)前node.js版本：v18.13.0
1. 安裝相關(guān)依賴包（1）安裝 Vant: 版本3.6.12
Yarn是由Facebook、Google、Exponent、Tilde聯(lián)合推出的一種新的Javascript包管理工具，通過它使用全世界開發(fā)者的代碼，或者分享自己的代碼給全世界的開發(fā)者。
（2）按需引入組件樣式
（3）在根目錄下vite.config.js文件中配置插件
在項目根目錄新建vite.config.js文件，填寫配置信息如下：
完成以上安裝和修改配置文件兩步，就可以直接在模板中使用Vant組件了，unplugin-vue-components會解析模板并自動注冊對應(yīng)的組件。
（4）安裝Less
（5）修改js配置文件增加less的配置
（6）安裝normalize
Normalize.css是CSS重置的現(xiàn)代替代方案，可以為默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。
2. 主文件main.js引入相關(guān)庫和包
js的編程風(fēng)格跟python很像，也許是python的編程風(fēng)格類似js吧。
3.首頁index.html增加移動端默認樣式
4. src/App.vue增加主要代碼
想當(dāng)初e租寶就在我那家公司樓上，暴雷后樓下停著好多警車，e租寶的大玻璃門也被封條封上了。；-)
5. 執(zhí)行查看效果
在控制臺輸入命令
yarn run dev --host 0.0.0.0 --port=5173
右側(cè)窗口會彈出demo預(yù)覽界面
點擊打開“toggle device”按鈕(頁面右上角紅框)即可模擬手機打開的頁面樣式
復(fù)制內(nèi)置Chrome瀏覽器窗口的地址欄可以分享給團隊的其它成員，還免去了部署nginx的繁瑣配置。
代碼上傳版本庫
由于Cloud Studio本身不能保存代碼，當(dāng)網(wǎng)絡(luò)中斷或無操作超時退出后，重新連接會重置IDE開發(fā)環(huán)境，安裝過的包必須重新安裝。因此，必須有一個代碼托管地方。這里可以選擇發(fā)布到CODING平臺或github上進行代碼托管。
github托管（1）初始化倉庫
在Cloud Studio新建終端，使用命令進行g(shù)it初始化倉庫。
(2) 發(fā)布GitHub
點擊“Publish Branch” -> 選擇"Publish To Github"
編輯提示“擴展Github希望使用GitHub登錄” -> 點擊"允許"，會打開一個新的頁面進行Github授權(quán)，授權(quán)完后再跳回原頁面。 點擊“Publish Branch” -> 選擇"Publish To Github private repository"
CODING托管（1）在coding新建項目和團隊 ： coding.net/
（2）在Cloud Studio選擇publish to coding
（3）輸入CODING賬戶的團隊域名前綴
CODing中查看團隊域名前綴
我的名稱是：metaofmeta，會彈出授權(quán)頁面授權(quán)成功后，選擇你要推送的剛剛創(chuàng)建的項目：
（5）代碼發(fā)布
等待一會代碼發(fā)布至CODing成功！
在CODING下就能看到你項目對應(yīng)代碼了！
泣菊18073355960： 公司自主設(shè)計并搭建了層次完整的企業(yè)級云架構(gòu),以組件化方... - 上學(xué)吧
蚌山區(qū)對稱： ______ 現(xiàn)在云服務(wù)器的價格越來越便宜了吧,畢竟這個市場已經(jīng)開始走向成熟,而且隨著云... 但都是可以用云服務(wù)器的. 騰訊云的云服務(wù)器(Cloud Virtual Machine,CVM)是騰訊...
Cloud Studio申請地址：cloudstudio.net/
注冊登錄：這里注冊和登錄Cloud Studio非常方便，提供了三種注冊方式。
選擇模板：Cloud Studio控制臺中羅列了常見的集成開發(fā)環(huán)境，支持了40+的多種模板（框架模板、云原生模板、建站模板），單擊所需模板卡片即可進入對應(yīng)環(huán)境中，也可以選擇新建工作空間中的云服務(wù)器模式，連接云服務(wù)器進行開發(fā)環(huán)境搭建。
這里我們選擇Vue來實現(xiàn)，Vue是一款用于構(gòu)建用戶界面的JavaScript框架，它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，并提供了一套聲明式的、組件化的編程模型，具有豐富的、可漸進式集成的生態(tài)系統(tǒng)，可以根據(jù)應(yīng)用規(guī)模在庫和框架間切換自如，幫助你高效地開發(fā)用戶界面。無論是簡單還是復(fù)雜的界面，Vue都可以勝任。
點擊Vue.js模板卡片，進入集成環(huán)境加載頁面，加載成功后即可進入開發(fā)環(huán)境進行編程。
點擊后做個實名認證后加載IDE界面并自動打開README預(yù)覽界面，整個IDE開發(fā)環(huán)境布局與VScode基本一致。
啟動后當(dāng)前路徑：/workspace/vuepress-deploy
當(dāng)前用戶：root
當(dāng)前磁盤空間：7G
當(dāng)前node.js版本：v18.13.0
1. 安裝相關(guān)依賴包（1）安裝 Vant: 版本3.6.12
Yarn是由Facebook、Google、Exponent、Tilde聯(lián)合推出的一種新的Javascript包管理工具，通過它使用全世界開發(fā)者的代碼，或者分享自己的代碼給全世界的開發(fā)者。
（2）按需引入組件樣式
（3）在根目錄下vite.config.js文件中配置插件
在項目根目錄新建vite.config.js文件，填寫配置信息如下：
完成以上安裝和修改配置文件兩步，就可以直接在模板中使用Vant組件了，unplugin-vue-components會解析模板并自動注冊對應(yīng)的組件。
（4）安裝Less
（5）修改js配置文件增加less的配置
（6）安裝normalize
Normalize.css是CSS重置的現(xiàn)代替代方案，可以為默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。
2. 主文件main.js引入相關(guān)庫和包
js的編程風(fēng)格跟python很像，也許是python的編程風(fēng)格類似js吧。
3.首頁index.html增加移動端默認樣式
4. src/App.vue增加主要代碼
想當(dāng)初e租寶就在我那家公司樓上，暴雷后樓下停著好多警車，e租寶的大玻璃門也被封條封上了。；-)
5. 執(zhí)行查看效果
在控制臺輸入命令
yarn run dev --host 0.0.0.0 --port=5173
右側(cè)窗口會彈出demo預(yù)覽界面
點擊打開“toggle device”按鈕(頁面右上角紅框)即可模擬手機打開的頁面樣式
復(fù)制內(nèi)置Chrome瀏覽器窗口的地址欄可以分享給團隊的其它成員，還免去了部署nginx的繁瑣配置。
代碼上傳版本庫
由于Cloud Studio本身不能保存代碼，當(dāng)網(wǎng)絡(luò)中斷或無操作超時退出后，重新連接會重置IDE開發(fā)環(huán)境，安裝過的包必須重新安裝。因此，必須有一個代碼托管地方。這里可以選擇發(fā)布到CODING平臺或github上進行代碼托管。
github托管（1）初始化倉庫
在Cloud Studio新建終端，使用命令進行g(shù)it初始化倉庫。
(2) 發(fā)布GitHub
點擊“Publish Branch” -> 選擇"Publish To Github"
編輯提示“擴展Github希望使用GitHub登錄” -> 點擊"允許"，會打開一個新的頁面進行Github授權(quán)，授權(quán)完后再跳回原頁面。 點擊“Publish Branch” -> 選擇"Publish To Github private repository"
CODING托管（1）在coding新建項目和團隊 ： coding.net/
（2）在Cloud Studio選擇publish to coding
（3）輸入CODING賬戶的團隊域名前綴
CODing中查看團隊域名前綴
我的名稱是：metaofmeta，會彈出授權(quán)頁面授權(quán)成功后，選擇你要推送的剛剛創(chuàng)建的項目：
（5）代碼發(fā)布
等待一會代碼發(fā)布至CODing成功！
在CODING下就能看到你項目對應(yīng)代碼了！
相關(guān)評說：
蚌山區(qū)對稱： ______ 現(xiàn)在云服務(wù)器的價格越來越便宜了吧,畢竟這個市場已經(jīng)開始走向成熟,而且隨著云... 但都是可以用云服務(wù)器的. 騰訊云的云服務(wù)器(Cloud Virtual Machine,CVM)是騰訊...
