Vue.js + LeanCloud（node.js）先後端分離開發樣板

若是對您有幫助的話，歡迎 star~ 個人github 地址

另外如今用命令行部署 leancloud 有點問題，async/await 會報錯，可是使用 git 部署不會,因此仍是使用lean deploy -g 進行部署吧~

LeanCloud 做爲國內領先的 Baas 雲服務提供者，簡化了不少相對複雜的操做，使得前端工程師 hold 住一個完整項目變得簡單。

經過 LeanEngine 雲引擎部署先後端代碼，配合高效的數據存儲徹底解放了生產力，尤爲是2015年 LeanCloud 推出的 LeanEngine-Full-Stack 解決方案，它整合了當前 Web 技術的通用方案，並與 LeanEngine 緊密結合，將基礎架構、自動化構建、國際化方案等底層技術解決方案組織成一個總體。用戶能夠經過最簡單的方式，直接開始業務開發，沒必要再糾結那些底層的技術選型了。

可是，這個項目已經很久沒有更新過了。。。最新的 LeanEngine 雲引擎都升級到3.0，不少 api 都有變化，以前的全棧項目倒是沒人維護了。

最近學習 Vue.js 感受真的好用，因此配合最新的雲引擎寫一個 boilerplate，做爲之後快速開發的模板工具。

主要技術棧

• 語言方面，整套方案使用 ES6標準的 JavaScript 代碼進行開發。

• Server 端運行環境基於 LeanEngine Node.js 環境，依賴安裝經過 npm，服務框架主要基於 Express 4.x。

• 前端取了個巧，直接使用了尤雨溪大大的 Vue-cli 生成。

先後端徹底分離，服務端設置了跨域，前端項目提出去也是 OK 的。

.
├── public          // LeanEngine Web 前端發佈目錄，HTML\CSS\JavaScript 構建後將放置於此
├── server-modules  // 服務器端代碼模塊目錄
│    ├── app            // LeanEngine 服務端代碼主入口
│    ├── api-router     // API 接口路由配置
│    ├── tool           // 工具方法
│    └── hello          // 示例代碼
├── fe                       // Web 前端項目目錄
│    ├── build          // 前端開發環境
│    ├── config         // 配置文件
│    └── src            // 源碼目錄
└── server       // LeanEngine 的環境配置

使用方式

若是沒有使用過，並不瞭解 LeanCloud 或 LeanEngine，先到官網中瞭解。

首先確認本機已經安裝 Node.js 運行環境和 LeanCloud 命令行工具，以後按照如下方式開始您的開發：

git clone 本項目後

• 在該項目根目錄執行

  $ npm install  // 安裝服務端環境依賴

• 在 fe 目錄中執行

  $ npm install  // 安裝前端環境依賴

調試

• 在根目錄執行

  $ lean up

  運行服務器端環境，經過 http://localhost:3000/ 能夠測試

• 在 fe 目錄中執行

  $  npm run dev

  運行 web 前端環境，經過 http://localhost:8080 能夠調試

  npm run build // 前端資源壓縮併發布到根目錄 public文件夾中

• 開發時須要同時運行這兩個任務（開兩個 terminal），就能夠同時調試 Server 與 Web

更多關於 LeanCloud 構建部署的命令能夠在LeanCloud官網找到。

參考資料

• LeanEngine-Full-Stack

• vue-cli

協議

MIT