vue怎么与flask前后端分离

Vue 和 Flask 是两个不同的技术栈，Vue 是前端框架，Flask 是后端框架。要实现前后端分离，可以将 Vue 作为前端单独开发，Flask 作为后端单独开发，前后端通过 API 接口进行通信。

以下是一个简单的实现步骤：

1. 在 Flask 中设置 API 接口，通过 Flask 提供的路由功能，返回 JSON 格式的数据给前端。例如：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    data = {"name": "John", "age": 30}
    return jsonify(data)

2. 在 Vue 中通过 axios 或 fetch 等工具发送请求获取数据，然后将数据渲染到前端页面上。例如：

<template>
  <div>
    <p>Name: {{ data.name }}</p>
    <p>Age: {{ data.age }}</p>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        data: {}
      }
    },
    mounted() {
      axios.get('/api/data')
        .then(response => {
          this.data = response.data
        })
    }
  }
</script>

3. 最后，将前端代码打包成静态文件，例如 js 和 css 文件，部署到静态资源服务器上，将 Flask 代码部署到后端服务器上。

这样就实现了前后端分离。前端和后端可以独立开发，通过 API 接口进行通信。