Vue.js+LeanCloud 單頁面博客

以前看了好多關於 Vue.js 的東東，路由哇，狀態管理呀，稀裏糊塗的一堆東西，每一個都相對獨立，這些單獨的 demo 和教程看起來以爲明白了，揉到一塊兒很差說了就。。因此想結合起來寫一寫，做爲一隻前端汪怎麼能夠沒有博客~

寫的過程當中有一些心得和踩坑，後續會整理出來~

若是以爲有幫助的話，謝謝幫忙 star ^_^

本項目github地址

簡介

一個先後端徹底分離的單頁應用 線上地址點此查看

採用了以前寫的 vue.js+LeanCloud（node.js） 的開發樣板 github地址點此查看

線上動圖若是不顯示請點這裏

version 1.0 pre-a

• 回覆

• 引用回覆

version 0.1.1

• 觸屏延遲優化

version 0.1

• 響應式佈局

• 主頁，關於，標籤

• 過渡動畫

• 文章顯示markdown 和代碼高亮

TODO

• 評論框

• 觸屏優化

技術棧

前端

• Vue.js

• vuex 狀態管理

• vue-router 路由

• vue-resource xhr請求

• marked 語法解析

• prismjs 代碼高亮

• fastclick 解決移動端延遲問題

後端

• node.js 服務端

• express 框架

• LeanCloud 數據存儲

開發

git clone git@github.com:jiangjiu/vue-leancloud-blog.git
$ cd vue-leancloud-blog
$ npm install

// 啓動服務器端, 默認地址 http://localhost:3000
$ lean up

// 另開一個 terminal
$ cd FE
$ npm install
// 啓動前端項目，默認地址 http://localhost:8080
$ npm run dev

構建部署

// 在FE目錄下  構建前端文件至 /public 文件夾
$ npm run build

// 根目錄下 leancloud命令行部署 / 經過 github 部署
$ lean deploy / lean deploy -g

具體部署可參考LeanCloud雲引擎 Node.js 部署

License

MIT