使用 Flask 和 Vue.js 构建 Web 应用

文章目录

- 入门
- - 1. 设置 Flask 后端
  - 2. 设置 Vue.js 前端
- 将 Flask 与 Vue.js 集成
- - 1. 配置 Flask 来提供 Vue.js 文件
  - 2. 构建 Vue.js 组件
  - 3. 运行应用程序
- 结论

在现代 Web 开发中，创建动态和响应式的应用通常涉及将后端框架如 Flask 与前端库如 Vue.js 结合起来。这种强大的组合使开发人员能够利用两种技术的优势来构建强大和可扩展的 Web 应用程序。
在这里插入图片描述

入门

首先，让我们设置开发环境并为项目创建基本结构。

1. 设置 Flask 后端

首先确保系统上安装了 Python 和 pip。然后，创建一个新目录用于项目，并进入该目录。

mkdir flask_vue_app
cd flask_vue_app

接下来，创建一个虚拟环境来管理依赖项。

python3 -m venv venv

激活虚拟环境。

1.在 macOS/Linux 上:

source venv/bin/activate

2.在 Windows 上:

venv\Scripts\activate

现在，安装 Flask。

pip install Flask

创建一个名为 app.py 的文件，并添加以下代码来设置一个基本的 Flask 应用程序。

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True)

2. 设置 Vue.js 前端

在 flask_vue_app 目录中，创建一个名为 frontend 的新目录。

mkdir frontend
cd frontend

初始化一个新的 Vue.js 项目。

vue create .

按照提示设置你的 Vue.js 项目。完成后，你将在 frontend 目录中拥有 Vue.js 项目文件。

将 Flask 与 Vue.js 集成

现在我们已经设置好了 Flask 后端和 Vue.js 前端，让我们将它们集成在一起。

1. 配置 Flask 来提供 Vue.js 文件

在 flask_vue_app 目录中，创建一个名为 templates 的目录。在 templates 中，创建一个名为 index.html 的文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flask Vue App</title>
</head>
<body><div id="app"></div><script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>