為什么學習並使用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已經二個多月了，使用vue2.0開發了一個SPA博客，在用vue人性化優勢的同時，的也遇到過很多坑，很多問題，分享一下我遇到的問題和解決辦法。
Vue2_blog
vue2,vuex,vue-cli,axios,webpack,express,mysql
項目結構
①server是我的接口代碼目錄，可以隨意放置，和頁面互不影響。
②src下面是頁面相關文件，assets下是js，css，以及圖片等，因為我們這是SPA，所以components下是頁面組件，js文件夾下會是一些公用的腳本，store就是vuex相關文件，App.vue是入口vue文件，main.js是一個配置文件，包括組件定義引用啊，路由啊等。
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080 (本地啟動)
npm run dev
# build for production with minification （生成靜態文件，用於打包上傳服務器）
npm run build
看這里：如果是剛入門的小伙伴，不知道把項目clone到本地后怎么在本地跑起來，這里寫了個詳細的說明文檔，希望能幫助到你們 說明文檔
主要實現的功能
1.用戶登錄
2.用戶注冊
3.用戶發帖
4.用戶評論帖
5.用戶留言
關鍵代碼實現
1.靜態頁面初始化構建
使用vue-cli初始化項目，生成的項目下面的目錄是這樣的。
在瀏覽器打開在瀏覽器打http://localhost:8080
，就可以看到歡迎頁了。
到這里，你的vue項目已經初始化完畢。然后在components下寫頁面，頁面是單獨的.vue文件。
head.vue
<template>
<div class='pr'>
<div class='info_area'>
<router-link to="/login"><div class='user_img'><img src='../assets/img/user.jpg' class='pic-full'></div></router-link>
<div class='log_out' @click='logout'><img src='../assets/img/log_out.png' class='pic-full'></div>
</div>
</div>
</template>
<script>
import {setCookie} from '../js/setcookie.js'
export default {
props: ['name'],
methods:{
logout:function(){ //清除用戶登錄信息
setCookie.deleteCookie('userName','/');
setCookie.deleteCookie('userPass','/');
this.$router.push("/login");
}
}
}
</script>
<style scoped src="../assets/css/head.css"></style>
2.接口的簡單編碼（express）
①連接數據庫，我這里使用連接池連接數據庫
var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
//使用連接池鏈接數據庫
var pool = mysql.createPool(models.mysql);
var jsonWrite = function(res, ret) {
if (typeof ret === 'undefined') {
res.json({
code: '1',
msg: '操作失敗'
});
} else {
res.json(ret);
}
};
//Vue_blog接口
// 增加用戶接口
router.use('/addUser', (req, res) => {
var sql = $sql.user.add;
var params = req.body;
console.log(params);
pool.query(sql, [params.username, params.pwd], function(error, results, fields) {
if (error) throw error;
if (results) {
console.log(results)
jsonWrite(res, results);
}
})
});
如上所寫，一個簡單的接口就算完成，這里是我對數據庫的操作。
var sqlMap = {
// 用戶
user: {
add: 'insert into user_info(user_name, user_pwd) values (?,?)',
check: 'select user_name,user_pwd from user_info',
},
message: {
written: 'insert into message_board(message_list, author, date) values (?,?,?)',
search: 'select message_list, author, date from message_board'
},
diary: {
written: 'insert into diary_board(diary_list, author, date) values (?,?,?)',
search_myself: "select * from diary_board where author='" + login_name + "'",
search_all: 'select * from diary_board'
},
comment: {
written: 'insert into comment(userid, msg_id, comment_message, create_time) values (?,?,?,?)',
search: 'select userid, msg_id, comment_message, create_time from comment'
}
}
module.exports = sqlMap;
我的數據庫信息：
module.exports = {
mysql: {
host: 'zygg8007596.gotoftp2.com',
user: 'zygg8007596',
password: '******',
database: 'zygg8007596',
port: '3306'
}
}
這樣就可以通過“/addUser”這個接口，實現信息往數據庫里的錄入，也就是簡單的用戶'注冊'。其他的接口也是一樣的道理，只是邏輯更復雜，sql語句更復雜而已。
接口寫完了，直接將server文件夾拖到服務器目錄下，在可以運行的容器里，使用高大上的pm2部署nodejs項目，也可以使用forever，但是個人更推薦前者。怎么部署呢？
成功安裝pm2后，直接“pm2 start app.js”，app.js就是服務的入口文件。然后服務就啟動起來了。可以使用一些命令查看狀態，以及關閉，開啟，重啟服務等。
這樣，接口在跑着，前端頁面就可以隨時調用，典型的前后端分離。
構建
使用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，一勞永逸，控制台窗口隨你怎么自由開啟關閉，對應的服務進程永遠在后面運行着。
服務器目錄
static和index.html是vue-cli構建的生產環境靜態文件，server是寫的服務端接口，使用pm2跑着（使用nginx做了一個端口轉發），服務跑服務，靜態頁面是靜態頁面，互不影響
項目預覽
①.注冊頁面
②登錄頁面
③登錄成功
④留言板列表
⑤用戶發表動態以及評論
總結
剛用vue開發的時候，遇到了很多問題，也犯了很多錯誤，不過，現在而言，自己收獲蠻多。自己的vue博客（留言板）已經開發完成。我想說的是，麻雀雖小，五臟俱全，雖然只是一個小應用，但它涵蓋了許多知識點，包括前端，后端，數據庫等一個網站的所必須的一些組成要素，對我來說，學習意義很大，願共勉！
Vue-cli + Express 構建的SPA Blog(前后分離)
注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權