00000基础搭建vue+flask前后端分离项目

在开始之前，确保你已经安装了Node.js和npm/yarn。

1. 初始化前端项目：

# 创建一个新的Vue项目
vue create vue-frontend
 
# 进入新建的项目目录
cd vue-frontend
 
# 添加必要的依赖
npm install axios
 
# 如果你想使用vue-router和vuex，可以添加它们
npm install vue-router vuex

2. 配置Vue项目：

   修改 vue.config.js 文件，确保代理设置指向你的Flask后端服务器。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:5000', // Flask后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

3. 创建Vue路由和状态管理：

   修改 src/main.js 来设置Vue路由和状态管理。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

4. 创建Flask后端项目：

# 安装Flask
pip install Flask
 
# 创建一个新的Python文件，例如app.py

5. 初始化Flask后端：

from flask import Flask, jsonify
 
app = Flask(__name__)
 
@app.route('/api/data')
def data():
    response_data = {
        'message': 'Success',
        'data': []  # 示例数据
    }
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True, port=5000)

6. 启动前后端服务：

# 在一个终端中启动Flask服务器
cd path/to/your/flask/project
flask run -p 5000
 
# 在另一个终端中启动Vue前端服务器
cd path/to/your/vue/project
npm run serve

现在你应该可以在浏览器中访问 http://localhost:8080 来看到你的Vue前端应用，并且它会通过代理从 http://localhost:5000 获取后端数据。