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

方案

揚帆！起航！

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. 部署

7. 申請AWS（亞馬遜云主機），一年免費試用，需填信用卡信息。實例一臺EC2，win或Linux系統,推薦Linux。開放相應端口并安裝node.js。

8. 安裝PM2，并運行第三步的server.js服務,并讓PM2隨系統啟動。

   $ npm install -g PM2
   $ pm2 start server.js
   $ pm2 startup

   此時我們的博客系統已經運行在EC2上了。

   購買域名。在騰訊云上購買的xyz域名，第一年8塊錢。解析到該EC2的公網IP上，即可通過域名訪問。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com