目前，技術圈都流行前後端分離，服務端渲染。vuejs由於其友好的中文文檔，相對於react容易上手。服務端,我喜歡使用nodejs搭配express框架配合搭建提供一個API服務，以及服務端渲染,客戶端則選擇vuejs開發前端頁面，vue-router做路由，vuex做狀態管理 ,axios做ajax請求。

開發準備

1.全局安裝 Vue-cli

npm i vue-cli -g

2.創建webpack 模板 項目文件，按照提示一直下一步，完成後按提示執行代碼

vue init webpack vue-node

3.安裝包依賴並運行

cd vue-node
npm install
npm run dev

tips: 如果npm卡住，可以使用 淘寶源 或者 安裝 cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

4.修改文件結構 (可以省略不用作)

• 將src文件夾修改為client
• 將webpack.base.conf.js內的src地址修改為client

5.創建服務端

mkdir server
cd server
/touch app.js

6.安裝express

npm install express --save
npm install body-parser --save

7.寫後端啟動文件 app.js

var express = require('express');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 訪問靜態資源
app.use(express.static(path.resolve(__dirname, './static')));
// 訪問單頁
app.get('*', function (req, res) {
    var html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8');
    res.send(html);
});
// 監聽
app.listen(8081, function () {
    console.log('success listen...8081');
});

打包並部署

npm run build
node server/app.js

在瀏覽器輸入http://127.0.0.1:8081/就能看到頁面了