創建 dev 分支：
$ git checkout -b dev
本章主要是初始化前端項目，並打通前后端接口。
1. 配置 Vue.js
1.1 安裝 vue-cli 腳手架
node 安裝省略，切換 npm 安裝鏡像為淘寶鏡像（速度更快）：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝 vue-cli：
F:\My Projects\flask-vuejs-madblog>cnpm install -g vue-cli
F:\My Projects\flask-vuejs-madblog>vue -V // 查看版本
2.9.6
1.2 初始化前端項目
// 切換到項目目錄中
cd flask-vuejs-madblog
// 使用 vue-js 初始化前端項目，項目名稱為 front-end
F:\My Projects\flask-vuejs-madblog>vue init webpack front-end
? Project name front-end
? Project description A Vue.js project
? Author hubery_jun <jun12xx3@outlook.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "front-end".
# Installing project dependencies ...
# ========================
# Project initialization finished!
# ========================
To get started:
cd front-end
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
安裝依賴：
F:\My Projects\flask-vuejs-madblog>cd front-end
F:\My Projects\flask-vuejs-madblog\front-end>cnpm install
啟動項目：
F:\My Projects\flask-vuejs-madblog\front-end>npm run dev
訪問：http://localhost:8080 看是否正常
2. 使用 axios 與后端進行交互
安裝 axios 用於前端向后端 flask 接口發送請求：
cnpm install axios --save
2.1 CORS 解決跨域問題
前后端兩個獨立的程序運行在不同的端口，要想相互交互，必須要解決跨域問題，后端程序需要安裝：
pip install flask-Cors
pip freeze > requirements.txt
back-end/app/__init__.py 新增：
from config import Config
from flask_cors import CORS
def create_app(config_class=Config):
app = Flask(__name__)
app.config.from_object(config_class)
# 跨域
CORS(app)
# 注冊藍圖 blueprint
from app.api import bp as api_bp
app.register_blueprint(api_bp, url_prefix="/api")
return app
2.2 前后端交互
刪除 front-end/src/components/HelloWorld.vue，再新建一個 front-end/src/components/Ping.vue，內容如下：
<template>
<div>
{{ msg }}
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "Ping",
data() {
return {
msg: ""
}
},
// 生命周期函數，加載頁面時會先執行這個函數，從而調用 getMessage() 方法
created() {
this.getMessage();
},
methods: {
getMessage() {
// 使用 axios 向 flask 發送請求
const url = "http://127.0.0.1:5000/api/ping";
axios.get(url)
.then((res) => {
this.msg = res.data;
})
.catch((error) => {
console.log(error);
})
}
}
}
</script>
<style scoped>
</style>
修改路由文件 back-end/src/router/index.js，因為我們刪除了 HelloWorld.vue，創建了 Ping.vue，但是路由還是 HelloWorld 的：
import Vue from 'vue'
import Router from 'vue-router'
import Ping from '@/components/Ping'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Ping',
component: Ping
}
]
})
運行前端項目：npm run dev，訪問：http://localhost:8080/#/
2.3 安裝 Bootstrap4
Bootstrap4 主要用來添加一些新的樣式，先安裝：
F:\My Projects\flask-vuejs-madblog\front-end>cnpm install bootstrap --save
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
peerDependencies WARNING bootstrap@* requires a peer of jquery@1.9.1 - 3 but none was installed
peerDependencies WARNING bootstrap@* requires a peer of popper.js@^1.16.1 but none was installed
√ All packages installed (1 packages installed from npm registry, used 4s(network 4s), speed 239.27kB/s, json 1(8.22kB), tarball 883.29kB)
首先在 src/main.js 中導入 Bootstrap 的樣式：
import router from './router'
// 導入 Bootstrap4 樣式
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
...
引入之后，就可以在組建中使用了，Ping.vue：
<button type="button" class="btn btn-primary">{{ msg }}</button>
最后的樣式是這樣子的：
3. 提交代碼
合並分支並推送到遠程
$ git add .
$ git commit -m '2. 初始化前端項目，打通前后端接口'
$ git checkout master
$ git merge dev
$ git branch -d dev
$ git push -u origin master
打標簽
$ git tag v0.2
$ git push origin v0.2