本文主要給大家介紹了新手如何透過Vue.js + Node.js打造個人博客，文中透過範例程式碼介紹的非常詳細，對大家學習具有一定的參考學習價值，希望能幫助到大家。
UI風格：主要參考Randy's Blog的風格，並加入自己的一點想法（主要是為了偷懶）。
前端頁面：基於Vue2.0的響應式SPA，啊？你問我為什麼？就如《關於》中的自我介紹：我自認為擅長Vue的SPA開發。
後台：前端工程師通往全端的捷徑：Node.js。負責寫入介面及渲染靜態頁面。
資料庫：原計畫是用MongoDB，但為了趕進度，索性資料庫都不用了，第一版就先這樣吧。
文章：參考hexo用markdown文法寫好文章再轉成html的做法。也是在本地編輯好md格式的文章，上傳到伺服器，Node.js直接讀取md檔案並轉換為html,回傳給前台，這也是為什麼暫時不需要資料庫的原因。
部署：AWS，一年時間免費使用！你問我一年後怎麼辦？ God knows!也許一年時間已經讓我經歷了從入門到放棄。
頁面佈局：自己看Cloud's Blog，簡單介紹下。第一畫面為一張壁紙寬高皆為100%鋪滿整個視覺區域，內容有部落格名稱、小標題及三個關於部落客的連結；點擊向下箭頭捲動進入第二螢幕正題，分為四個Tab模組：【首頁】、【文章】、【作品】、【關於】。預設為【首頁】，即最新一篇文章詳情，【文章】為文章列表，點擊可閱讀文章內容，【作品】為作品列表，這部分還沒完成，【關於】為關於博主的一些介紹。 PS：首屏的壁紙在Google圖片裡找了一上午才找到這張還算滿意的，考慮到手機端壁紙是居中鋪滿整個可視區域，要找到一張PC端手機端效果都還行且逼格不能太低的圖片真的不容易，BTW，部落客還是選擇困難症患者。
前端開發：從Vue鷹架開始
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack blog # 安装依赖，走你 $ cd blog $ npm install $ npm run dev
然後安裝Vue -router用於SPA路由及vue-resource或axios用於Ajax。
$ npm install --save vue-router $ npm install --save axios # vue官方推荐的ajax库不再是vue-resource,而是axios
然後就可以開始碼靜態頁面了，根據第一步頁面佈局的思路寫出靜態頁面應該不是什麼難事，其中需要調用第三步中node.js提供的接口，這裡就不再多說了。完成靜態頁面後編譯
$ npm run build
後端開發：建立服務端目錄結構並安裝express框架及marked用於將md檔案轉為html
$ mkdir blog-server && cd blog-server $ mkdir public $ npm install --save express$ npm install --save marked
寫入接口，目前主要有三個接口。
渲染靜態頁面，將第二部編譯出來的靜態檔案及md格式的文章檔案拷入public資料夾，並用express內建的中間件指定public資料夾為靜態資源檔案的根目錄並緩存。因為是單頁應用，所以記得要處理好404錯誤。
# server.jsvar express = require('express');var app = express(); app.use(express.static('public',{maxAge:60*60*24*30})); app.get('/',function(req,res){ res.sendFile('/index.html',{root: __dirname + '/public/'}); }); app.listen(80);
取得文章清單介面。 fs.readdir方法讀取md檔案所在資料夾，傳回所有md檔案的檔案名稱即文章標題、建立時間、文章路徑，並依建立時間排序渲染在【文章】頁。
文章內容介面。根據第一個介面傳回的檔名及路徑，用fs.readFile方法讀取md檔的內容並用marked轉為html並傳回給客戶端，渲染在文章內容頁。
首頁內容介面。類似介面2，讀取最新一篇文章並回傳。記得處理跨域問題。
app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next(); });
部署
#申請AWS（亞馬遜雲端主機），一年免費試用，需填寫信用卡資料。實例一台EC2，win或Linux系統,推薦Linux。開放對應連接埠並安裝node.js。
安裝PM2，並執行第三步驟的server.js服務,並讓PM2隨系統啟動。
$ npm install -g PM2 $ pm2 start server.js $ pm2 startup
此时我们的博客系统已经运行在EC2上了。
购买域名。在腾讯云上购买的xyz域名，第一年8块钱。解析到该EC2的公网IP上，即可通过域名访问。
以上是新手如何透過Vue.js + Node.js打造個人博客的詳細內容。更多資訊請關注PHP中文網其他相關文章！
