天天看點

如何使用webify快速建構Nuxt應用

Webify是雲開發團隊推出的一款一站式托管服務産品,這是一個專為 Web 開發者打造的雲上開發、部署平台,幫助開發者快速開發、預覽、部署自己的 Web 應用,還支援從Github等第三方代碼托管平台導入應用,為前端開發者提供極佳的服務體驗。

應用場景

靜态網站: Web 應用托管不僅支援托管靜态網站的各種資源,還對開源社群内流行的開源架構進行了适配。

單頁面應用: Web 應用托管提供自定義路由能力,支援 SPA 類型的配置,免除配置服務端的煩惱。

服務端渲染(SSR)應用: Web 應用托管對諸多開源 SSR 架構進行了适配。

背景 Web 服務: Web 應用托管提供雲托管、雲函數兩種形式的計算能力,以滿足多種類型的背景 Web 服務的需求。

模版建立

位址:https://cloud.tencent.com/product/webify

首先進入Web應用托管平台,點選「建立應用」,選擇從模版建立,選擇Nuxt.js

如何使用webify快速建構Nuxt應用

選擇Git平台,并填寫好倉庫名稱後,單擊「下一步」

填寫應用名稱,選擇架構預設(亦可自己自定義填寫),單擊「部署應用」

如何使用webify快速建構Nuxt應用

可以看到應用正在建構與部署中

如何使用webify快速建構Nuxt應用
如何使用webify快速建構Nuxt應用

首次建立應用,會下發CND配置,需要3-5分鐘才能生效

如何使用webify快速建構Nuxt應用

單擊應用中的連結,可以發現我們的應用可以通路啦!

如何使用webify快速建構Nuxt應用

開發應用

進入到我們的GitHub倉庫後,可以發現webify在建立應用的時候,已經自動為我們建立了代碼倉庫

如何使用webify快速建構Nuxt應用
git clone <romote-URL> //克隆倉庫到本地
cd <workplace-dir> //進入項目目錄
npm i //安裝相關依賴
           

把項目Clone到本地後,即可進行開發,在修改完後,送出至遠端 Git 倉庫,将會觸發Webify 的自動建構及部署。

git commit -m "change index.vue"
git push
           
如何使用webify快速建構Nuxt應用

可以見到我們的修改生效啦。

注意事項

有時候在送出代碼并建構完成後,并未能見到頁面有變化,是因為CDN生效需要一些時間,稍等一會即可更新應用頁面。

詳見一鍵部署文檔:https://webify.cloudbase.net/docs/guides/deploy-button

Webify官方網站:https://webify.cloudbase.net/

如何使用webify快速建構Nuxt應用