Vue 全家桶 + Express 實現的博客（後端API全部自己手寫，很適合剛學習vue以及express的小夥伴學習）

01-30

為什麼學習並使用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 的性能，達到接近原生的流暢體驗。

陸續續看vue已經二個多月了，3月份使用vue2.0開發了一個簡單的博客，在用vue人性化優勢的同時，的也遇到過很多坑，很多問題，分享一下我遇到的問題和解決辦法

Vue2_blog

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

Build Setup

# install dependenciesnnpm installnn# serve with hot reload at localhost:8080 (本地啟動)nnpm run devnn# build for production with minification （生成靜態文件，用於打包上傳伺服器）nnpm run buildn

主要實現的功能

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秒的重載。其實它主要作用就是 nodejs 集群。按照我的理解，通俗的將，它的作用就是，本地開發環境，你要開啟node服務，實現某些功能(比如監聽某個埠)，就會在控制台執行"node app.js"(比如這個文件叫app吧！)，對應的node服務就會開啟了，但是你只要一關閉這個控制台窗口，他就沒有對應的服務進程了，每次起服務都得"控制台 -> node app.js"。在生產環境來說，很麻煩，這會就用到了pm2，只需要執行一次"pm2 start app.js"。ok，一勞永逸，控制台窗口隨你怎麼自由開啟關閉，對應的服務進程永遠在後面運行著。

Github源碼

項目預覽

Vue_blog(只適配了移動端)

總結

剛用vue開發的時候，遇到了很多問題，也犯了很多錯誤，不過，現在而言，自己收穫蠻多。自己的vue博客（留言板）已經開發完成。我想說的是，麻雀雖小，五臟俱全，雖然只是一個小應用，但它涵蓋了許多知識點，包括前端，後端，資料庫等一個網站的所必須的一些組成要素，對我來說，學習意義很大，也很適合剛學習vue以及express的小夥伴學習。願共勉！