Vue-cli + express 構建的SPA Blog（採用先後端分離方案）

爲何學習並使用Vue

1.發展趨勢

最近這幾年的前端圈子，因爲戲臺通常精彩紛呈，從 MVC 到 MVVM，你剛唱罷我登場。 backbone，AngularJS 已成昨日黃花，reactjs 如日中天，同時另外一更輕量的 vue 發展勢頭更猛，號稱兼具了 angularjs 和 reactjs 的二者優勢。

2.Vue能幹嘛

移動端的上網需求已經遠高於pc端，特別是 hybrid 方式的H5應用中，可是性能問題一直是痛點。 若是使用 SPA（就是俗稱的單頁應用（Single Page Web Application）），SPA它將全部的活動侷限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。一旦頁面加載完成了，SPA不會由於用戶的操做而進行頁面的從新加載或跳轉。沒有頁面切換，就沒有白屏阻塞，能夠大大提升 H5 的性能，達到接近原生的流暢體驗。

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,mysql ,pm2,nginx

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080 (本地啓動)
npm run dev

# build for production with minification （生成靜態文件，用於打包上傳服務器）
npm run build
複製代碼

主要實現的功能

1.用戶登陸

2.用戶註冊

3.用戶發帖

4.用戶評論帖

5.用戶留言

構建

使用vue-cli來構建初始化項目，很是方便，至關於生成項目模板這樣子。

vuex

vue就我我的理解，是數據驅動，實現頁面組件化開發，更好管理和維護，vuex是用做組件間的通訊，固然了若是頁面夠簡單，也可使用其餘方法進行通訊（傳值），好比props等。

axios

說實話，項目前期我還用的是vue-resource，後面才統一改用axios（尤大大本人都力推的），兩者都是用於客戶端和服務端通訊的，也就是用做ajax請求的。

webpack

webpack是一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。好比，咱們vue組件化開發，會用 ".vue" 文件，這種文件不會被瀏覽器所解析，因此須要用webpack來 "格式化" 他們，讓他們變爲瀏覽器能夠解析的文件格式。還有，還有，用webpack，你就能夠愉快的使用es6的語法啦！

express & mysql

所謂一個"系統"，怎麼只能是簡單的靜態頁面？在這裏用了express（express 是一個基於 Node.js 平臺的開發框架）和mysql來進行編寫數據存儲的後端api，用於用戶信息在數據庫裏存儲和讀取。

pm2

pm2 是一個帶有負載均衡功能的Node應用的進程管理器,並保證進程永遠都活着，0秒的重載。按照個人理解，通俗的將，它的做用就是，本地開發環境，你要開啓node服務，實現某些功能(好比監聽某個端口)，就會在控制檯執行"node app.js"(好比這個文件叫app吧！)，對應的node服務就會開啓了，可是你只要一關閉這個控制檯窗口，他就沒有對應的服務進程了，每次起服務都得"控制檯 -> node app.js"。在生產環境來講，很麻煩，這會就用到了pm2，只須要執行一次"pm2 start app.js"。ok，一勞永逸，控制檯窗口隨你怎麼自由開啓關閉，對應的服務進程永遠在後面運行着。

服務器目錄

static和index.html是vue-cli構建的生產環境靜態文件，server是寫的服務端接口，使用pm2跑着（使用nginx作了一個端口轉發），服務跑服務，靜態頁面是靜態頁面，互不影響。

Github地址

Github源碼

項目預覽

Vue_blog(只適配了移動端)