FastAPI和Vue.js是兩個非常流行的Web框架。FastAPI作為Python開發者的首選框架，提供了高性能和易用性，而Vue.js則是前端開發人員的首選框架，提供了流暢的用戶體驗和響應速度。

在此文章中，我們將討論如何使用FastAPI和Vue.js構建Web應用程序。我們將使用FastAPI作為后端框架，Vue.js作為前端框架。我們還將使用MongoDB作為我們的數據庫。

# 安裝FastAPI
pip install fastapi
# 安裝MongoDB驅動程序
pip install pymongo
# 安裝Vue.js
npm install vue

首先，我們將使用FastAPI創建我們的后端框架。我們將使用PyMongo將FastAPI連接到MongoDB。我們將創建一個API端點，以獲取所有用戶。我們將使用MongoDB作為我們的數據庫。

from fastapi import FastAPI
from pymongo import MongoClient
app = FastAPI()
client = MongoClient("mongodb://localhost:27017/")
db = client["fastapi-vue"]
@app.get("/users")
async def read_users():
users_collection = db.get_collection("users")
users = []
for user in users_collection.find():
users.append(user)
return {"users": users}

下一步是創建我們的Vue.js前端應用程序。我們將使用Vue CLI創建我們的Vue.js項目。我們將使用Axios將Vue.js連接到我們的FastAPI端點。

# 創建Vue.js項目
vue create fastapi-vue
# 安裝Axios
npm install axios

我們將創建一個組件，以使用Axios獲取所有用戶。我們將在我們的Vue.js應用程序中渲染這個組件。

<template>
<div>
<h1>All Users</h1>
<ul>
<li v-for="user in users" :key="user._id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
users: [],
};
},
mounted() {
axios.get("http://localhost:8000/users").then((response) =>{
this.users = response.data.users;
});
},
};
</script>

最后，我們將在FastAPI端口8000上運行我們的后端應用程序。我們還將在Vue.js端口8080上運行我們的前端應用程序。

# 運行FastAPI應用程序
uvicorn main:app --reload
# 運行Vue.js應用程序
npm run serve

現在，您可以在8080端口上查看您的Vue.js應用程序，并在8000端口上查看FastAPI API端點。