新手如何透過Vue.js + Node.js打造個人博客

本文主要給大家介紹了新手如何透過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!也許一年時間已經讓我經歷了從入門到放棄。

揚帆！起航！

1. 頁面佈局：自己看Cloud's Blog，簡單介紹下。第一畫面為一張壁紙寬高皆為100%鋪滿整個視覺區域，內容有部落格名稱、小標題及三個關於部落客的連結；點擊向下箭頭捲動進入第二螢幕正題，分為四個Tab模組：【首頁】、【文章】、【作品】、【關於】。預設為【首頁】，即最新一篇文章詳情，【文章】為文章列表，點擊可閱讀文章內容，【作品】為作品列表，這部分還沒完成，【關於】為關於博主的一些介紹。 PS：首屏的壁紙在Google圖片裡找了一上午才找到這張還算滿意的，考慮到手機端壁紙是居中鋪滿整個可視區域，要找到一張PC端手機端效果都還行且逼格不能太低的圖片真的不容易，BTW，部落客還是選擇困難症患者。

2. 前端開發：從Vue鷹架開始

   
   

3. # 全局安装 vue-cli
   $ npm install --global vue-cli
   # 创建一个基于 webpack 模板的新项目
   $ vue init webpack blog
   # 安装依赖，走你
   $ cd blog
   $ npm install
   $ npm run dev

4. 然後安裝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

5. 後端開發：建立服務端目錄結構並安裝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);

1. 取得文章清單介面。 fs.readdir方法讀取md檔案所在資料夾，傳回所有md檔案的檔案名稱即文章標題、建立時間、文章路徑，並依建立時間排序渲染在【文章】頁。

2. 文章內容介面。根據第一個介面傳回的檔名及路徑，用fs.readFile方法讀取md檔的內容並用marked轉為html並傳回給客戶端，渲染在文章內容頁。

3. 首頁內容介面。類似介面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();
   });

6. 部署

• #申請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中文網其他相關文章！