Cloudbase Framework 是雲開發官方出品的先後端一體化部署工具，無需修改業務代碼，就能將 Vue 應用先後端一鍵託管部署在雲開發平臺。藉助於 Cloudbase Framework，你能夠一鍵部署一個已有的 Vue 項目，也能夠快速建立一個新的 Vue 項目，用於後續開發。css
第一步：確保本地安裝了 Node.js
node 版本須要在10以上，若是沒有安裝，請前往
官網
安裝，建議選擇 LTS 版本。
第二步：擁有騰訊雲帳號，開通環境並得到了環境ID
第三步：安裝 Cloudbase CLI
檢查是否安裝成功。若是有版本輸出，就表明安裝成功了。
cloudbase 命令能夠簡寫成 tcb（Tencent CloudBase 的簡稱）。
關於tcb -h，來看看 cloudbase 有哪些能力。
騰訊雲帳號登陸、退出前端
雲開發環境配置vue
應用配置初始化與部署node
雲函數相關react
文件上傳、下載、刪除、權限設置nginx
HTTP Service相關web
第四步：登陸 Cloudbase
輸入如下命令，會在瀏覽器打開騰訊雲的受權頁面，點擊「確認受權」便可。
準備工做都作好之後，咱們就能夠着手部署相關的工做了。
總的來講，用 Cloudbase Framework 部署一個 Vue 應用，只須要兩步。第一
步：初始化項目
配置；第二步，部署。
若是你的項目已經存在，在項目根目錄，執行如下命令，生成項目配置。
cloudbase init --without-template
選擇關聯環境後，會在項目根目錄，生成一個 cloudbasrc.json 文件。雲開發環境 ID 會被寫進這個文件。
{"envId":"static-176d4a"}
cloudbase framework:deploy
1）安裝插件 @cloudbase/framework-plugin-web
site。
在cloudbaserc.json裏，你會發現執行這個命令後，新增了這個插件。
3）讀取publicPath，並將應用資源託管到 /下。
由於my-vue-app是用vue-cli建立的項目，因此publicPath默認爲"/"
部署成功後，訪問地址：
https://static-176d4a.tcloudbaseapp.com/
第一步：初始化項目
執行如下命令，Cloudbase 除了會幫你生成項目配置外，還會初始化項目。
cloudbase init --template=vue
執行命令後，會讓你選擇關聯環境、選擇雲開發模板（Vue 應用）、輸入項目名稱。這裏，咱們的項目名是cloudbase-example。
須要注意的是，cloudbase 默認會建立一個全棧 Vue 應用，若是你只想要一個靜態 Vue 應用，須要手動去掉雲函數部分的代碼。
進入建立好的項目根目錄，瀏覽文件結構你會發現和 cloudbase 相關的，除了 cloudbaserc.json 之外，還有一個 cloudfunctions 目錄。這個目錄就是雲函數所在的目錄。在 cloudfunctions 目錄下有一個名爲 vue-echo 的函數，這個雲函數，稍後會用到。
cloudebaserc.json
裏，會默認安裝兩個插件。以前提到的
@cloudbase/framework-plugin-website
和 雲函數部署相關的
@cloudbase/framework-plugin-function
第二步（可跳過）：本地開發。
執行 npm i, 安裝 node_modules。
執行 npm run dev 。本地運行時，默認監聽端口是 5000，publicPath 是 /vue。這些配置項都可在 package.json 裏修改。
點擊「調用 hello world 雲函數」按鈕時，會調用 callFunction 這個方法。
而這個方法，會去調用名爲「vue-echo」 的雲函數。這個雲函數作的就是「echo」的工做，返回一個對象，key名爲「event」, value是你傳入的對象 {"foo":"bar"}
關於 cloudbase 的雲函數，以後的文章會進一步說明，這裏就不贅述了。
第三步：部署
默認 cloudPath 是 /vue。若是要修改靜態資源路徑，請在 cloudbaserc.json 裏修改 cloudPath。
cloudbase framework:deploy
若是你在部署過程當中，遇到了問題，或者但願咱們能支持新功能，歡迎 issues 反饋！
做者：
秦慕，前端開發工程師，目前就任於騰訊醫典。熱愛開源，業餘開發過文檔翻譯工具Brewor
d（https://www.breword.com/），
翻譯過husky、create-react-app、redux、esbuild文檔。
歡迎在下方評論區留言或在微信開放社區 進入雲開發專區與咱們交流。vue-cli
Cloudbase Framework目前已經開源，點擊文末閱讀原文查看源碼。npm
△ 打通先後端，這款效能提高開源「神器」你必定要了解！
因爲公衆號推送規則更改，請多多
分享
、
點贊
和
「在看」
，以及時獲取雲開發Cloudbase的最新動態。
點擊在看讓更多人發現精彩json