Vue.js+Flask\建立一個單頁APP案例詳解（附程式碼）

$ npm install -g vue-cli

$ mkdir flaskvue
$ cd flaskvue
$ vue init webpack frontend

$ cd frontend
$ npm install
# after installation
$ npm run dev

// Home.vue
<template>
<p>
<p>Home page</p>
</p>
</template>

// About.vue
<template>
<p>
<p>About</p>
</p>
</template>

import Vue from 'vue'
import Router from 'vue-router'
const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' }
]
const routes = routerOptions.map(route => {
return {
...route,
component: () => import(`@/components/${route.component}.vue`)
}
})
Vue.use(Router)
export default new Router({
routes,
mode: 'history'
})

index: path.resolve(dirname, '../dist/index.html'),
assetsRoot: path.resolve(dirname, '../dist'),

index: path.resolve(dirname, '../../dist/index.html'),
assetsRoot: path.resolve(dirname, '../../dist'),

$ mkdir backend
$ cd backend
$ virtualenv -p python3 venv

$ source venv/bin/activate

(venv) pip install Flask

(venv) cd ..
(venv) touch run.py

from flask import Flask, render_template
app = Flask(name,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/')
def index():
return render_template("index.html")

(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")

const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' },
{ path: '*', component: 'NotFound' }
]

// NotFound.vue
<template>
<p>
<p>404 - Not Found</p>
</p>
</template>

from flask import Flask, render_template, jsonify
from random import *
app = Flask(name,
static_folder = "./dist/static",
template_folder = "./dist")
@app.route('/api/random')
def random_number():
response = {
'randomNumber': randint(1, 100)
}
return jsonify(response)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
return render_template("index.html")

{
"randomNumber": 36
}

<template>
<p>
<p>Home page</p>
<p>Random number from backend: {{ randomNumber }}</p>
<button @click="getRandom">New random number</button>
</p>
</template>
<script>
export default {
data () {
return {
randomNumber: 0
}
},
methods: {
getRandomInt (min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min + 1)) + min
},
getRandom () {
this.randomNumber = this.getRandomInt(1, 100)
}
},
created () {
this.getRandom()
}
}
</script>

(venv) cd frontend
(venv) npm install --save axios