Vue.js 入門最佳項目實踐-我的博客全棧SPA應用從零到上線

項目簡介 在線預覽

開發指南-快速上手

這是一個徹底由 Vue 全家桶來實現的輕博客應用，充分應用了Vuex對全部狀態數據進行管理並優化總體結構，後端應用Node.js開發的全棧應用，在業餘時間持續在GitHub上迭代版本並不斷完善功能，由LeanCloud提供數據存儲服務(雲服務)。

項目源代碼

Version 4.0

完整4.0版本，本次更新及優化點主要新增管理員權限，增長了登陸功能，如今只有管理員才能發佈文章了，爲後期後臺管理開發作鋪墊.
增長了分頁的功能，對 api 作了新改動，如今每頁將顯示10篇最新的文章.
markdown 採用 Github 樣式渲染，不再用擔憂頁面樣式被嫌棄了！
修復若干前期遺留問題。。

Version 3.0

初步完整3.0版本，完善前端PC端與移動端樣式，包括全站響應式設計，以及文章markdown文章渲染，代碼HightLight等，增長評論與回覆功能，完善自建api，文章發佈於優雅的Markdown編輯器。

技術棧

前端

• Vue.js 2.0
• Vuex 狀態管理
• Vue-router 前端路由
• Axios 網絡請求
• fastclick 解決移動端延遲問題
• Element-UI

後端

• Node.js 服務端
• Express 應用框架
• LeanCloud 數據存儲

組件

• [x] Markdown渲染
• [x] 響應式頁面
• [x] 文章評論/回覆
• [x] 標籤分類
• [x] 懸浮導航
• [x] 文章發佈
• [x] RESTful API接口

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

版本迭代

Version 1.0 - 初始化1.0版本，僅完成先後端api鏈接過程，發佈和樣式還未完成

Version 2.0 - 初步完整2.0版本，完善前端PC端與移動端樣式，包括全站響應式設計，以及文章markdown文章渲染，代碼HightLight等，增長評論與回覆功能。

Version 3.0 - 增長Post發佈文章功能，借用Vue數據雙向綁定的特色實時顯示Markdown編輯後的效果。下個版本將繼續完善發佈功能，並添加已有文章的管理功能。

Version 4.0 - 完整4.0版本，本次更新及優化點主要新增管理員權限,分頁,Github 樣式渲染,修復若干前期遺留問題。。

開發

項目中充分結合了LeanCloud的優點，可也讓咱們快速的利用JavaScript構建出能夠在線應用的Web應用，主要內容可參考源代碼，下面簡單講解一下每一個開發中注意的點。

LeanCloud 配置

推薦用Vue-Cli初始化項目後，npm i leanengine 安裝LeanCloud核心依賴，以後只要在項目根目錄下touch server.js,主要操做詳見[LeanCloud官方文檔]()

'use strict';
var AV = require('leanengine');
AV.init({
  appId: process.env.LEANCLOUD_APP_ID,
  appKey: process.env.LEANCLOUD_APP_KEY,
  masterKey: process.env.LEANCLOUD_APP_MASTER_KEY
});
var app = require('./server-modules/app');
// 端口必定要從環境變量 `LEANCLOUD_APP_PORT` 中獲取。
// LeanEngine 運行時會分配端口並賦值到該變量。
var PORT = parseInt(process.env.LEANCLOUD_APP_PORT || 3000);
app.listen(PORT, function () {
  console.log('Node app is running, port:', PORT);
  });
});

部署上線

安裝leancloud部署工具brew install lean-cli ，具體見LeanCloud網站託管

後臺Api搭建

有了數據存儲的支持，就能夠直接發揮Express的做用，定義文章等模塊的數據模型並定義數據接口。能夠用lean up 啓動後端Node.js服務器，開啓接口。

const router = require('express').Router();
// 添加路由模塊
const content = require('./modules/content'); // 博客數據模型
// 路由設置
router.get('/content-list', content.contentList); // GET博客列表
router.get('/article/:id', content.article);// GET博客詳情
router.post('/article/submitArticle', content.submitArticle);// POST發佈博客

Vuex

明確各個需管理的數據模塊，定義各自的state與mutations，前端與後端的交互動做由actions處理，以後可在各個頁面dispatch咱們的數據。

// vuex/store.js
export default new Vuex.Store({
  strict: debug,
  actions,
  modules: {
    contentList,
    article,
    commentsList,
    tags,
    tagContentList
  }
})
// vuex/actions.js
getContentList ({ commit }) {
    commit(types.REQUEST_CONTENT_LIST)
    axios.get(API_ROOT + 'api/content-list')
      .then(response => {
        commit(types.GET_CONTENT_LIST, response.data)
        console.log('getContentList success');
      })
      .catch(error => {
        commit(types.GET_CONTENT_LIST_FAILURE, error)
      })
  }

Vue-Router

定義前端路由，優化頁面跳轉速度。

export default new Router({
    mode: 'history',
    routes: [{
        path: '/',
        name: 'Index',
        component: function(resolve) {
            require(['@/views/Index'], resolve)
        }
    }, {
        path: '/article/:id',
        name: 'article',
        component: function(resolve) {
            require(['@/views/Article'], resolve)
        }
    }
    }],
    scrollBehavior(to, from, savedPosition) {
        // 路由切換時滾動到頂部
        if (savedPosition) {
            return savedPosition
        } else {
            return {  y: 0 }
        }
    }
})

FastClick

消除移動端上的雙擊延時

fastClick.attach(document.body) // 消除移動端雙擊延時

運行截圖

本地預覽步驟

// clone 項目源代碼
$ git clone xxxxxxxxxxxxxxx

// 安裝服務端相關依賴
$ cd ohmo
$ npm install

// 啓動服務端,默認地址 http://localhost:3000(須要提早註冊一個leancloud帳號)
$ lean up

// 安裝前端相關依賴
$ cd front-end
$ npm install

// 啓動前端項目,默認地址 http://localhost:8080
$ npm run dev

構建部署

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

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

服務上線指南

首先先提下提交咱們的代碼上線的過程，線上服務器只須要咱們最後的 server 文件以及構建後的前端文件，即根目錄下的 public 文件夾下的東東。即在完成每次的開發內容後，記得在 frond-end 前端項目中，執行 npm run build 代碼構建。

能夠注意到根目錄下的 server.js 文件，將代碼 push 上去後，會自動執行 node server.js 啓動 node 服務器，配置的地方見 package.json 裏面的 scripts 部分，固然你也能夠根據本身喜歡的方式進行定義。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },

再看看 server.js 須要作些什麼，

'use strict';
var AV = require('leanengine');

AV.init({
  appId: process.env.LEANCLOUD_APP_ID,
  appKey: process.env.LEANCLOUD_APP_KEY,
  masterKey: process.env.LEANCLOUD_APP_MASTER_KEY
});

// 若是不但願使用 masterKey 權限，能夠將下面一行刪除
AV.Cloud.useMasterKey();

var app = require('./server-modules/app');

// 端口必定要從環境變量 `LEANCLOUD_APP_PORT` 中獲取。
// LeanEngine 運行時會分配端口並賦值到該變量。
var PORT = parseInt(process.env.LEANCLOUD_APP_PORT || 3000);
app.listen(PORT, function () {
  console.log('Node app is running, port:', PORT);

  // 註冊全局未捕獲異常處理器
  process.on('uncaughtException', function(err) {
    console.error("Caught exception:", err.stack);
  });
  process.on('unhandledRejection', function(reason, p) {
    console.error("Unhandled Rejection at: Promise ", p, " reason: ", reason.stack);
  });
});

其實就是一些啓動 node 服務器以及鏈接 leancloud 的一些驗證信息等各類配置，若是出現異常將錯誤信息打印等工做。

最後說的就是部署的工做，因爲是用的免費測試應用，因此只有一個生產環境，不用管環境的問題。咱們使用的部署方式使用官方提供的一套命令行工具便可完成，安裝方式：(執行下面的命令便可，須要提早裝好 brew)

brew install lean-cli

裝好後，若是在命令行執行 lean，後能夠看到使用說明，說明已經安裝成功了，接着進行下一步。在項目根目錄下，登陸本身的 leancloud 帳號，並完成當前項目與線上建立應用的綁定。若是項目是第一次綁定，請先執行 lean init 初始化。

lean login
// 輸入郵箱 & 密碼
// 登陸成功後
lean init
// 能夠看到已經建立的應用，選擇便可完成綁定,已綁定可鍵入 lean switch 切換應用

綁定好咱們的應用後,爲了防止部署後出現問題，能夠先執行 lean up 嘗試在本地啓動服務，檢查應用是否啓動正常。若是有報錯，請先檢查是否本地端口被佔用，換一個便可。

若是前面一切順利，在根目錄下執行

lean deploy

即完成可對代碼進行線上部署。因爲是免費的測試服務器，因此會出現時不時的服務沒法訪問的狀況，且一段時間不訪問，也會自動進入休眠狀態，即再次啓動時須要等待服務被喚醒，時間較長。

部署完成後，訪問咱們線上填寫的 url 便可在線看到咱們的應用。有了咱們能夠玩弄的雲服務器後，就能夠作一些其餘有意思的事情了，好比爬蟲等等，就看大家的想法了。hehe