后端（Django）

1. 創建Django項目和應用：
   • 確保你已經安裝了Django。如果沒有安裝，可以使用以下命令安裝：

   pip install django
   

   • 創建一個新的Django項目：

   django-admin startproject myproject
   

   • 進入項目目錄并創建一個新的應用程序：

   cd myproject
   python manage.py startapp myapp
   

2. 配置項目：
   • 在 myproject/settings.py 文件中，將 myapp 添加到 INSTALLED_APPS 列表中，并配置允許跨域訪問（因為Vue和Django可能運行在不同端口）。安裝 corsheaders 庫：

   pip install django-cors-headers
   

   • 在 INSTALLED_APPS 中添加 corsheaders：

   INSTALLED_APPS = [...'corsheaders','myapp',
   ]
   

   • 在 MIDDLEWARE 中添加 corsheaders 中間件：

   MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware','django.middleware.common.CommonMiddleware',...
   ]
   

   • 配置允許所有來源訪問（在生產環境中請替換為實際的前端域名）：

   CORS_ALLOW_ALL_ORIGINS = True
   

3. 編寫視圖和API：
   • 在 myapp/views.py 中編寫一個簡單的視圖函數：

   from django.http import JsonResponsedef get_data(request):data = {'message': '這是來自Django后端的數據'}return JsonResponse(data)
   

   • 在 myapp/urls.py 中配置URL：

   from django.urls import path
   from. import viewsurlpatterns = [path('api/data/', views.get_data, name='get_data'),
   ]
   

   • 在 myproject/urls.py 中包含 myapp 的URL配置：

   from django.contrib import admin
   from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('', include('myapp.urls')),
   ]
   

4. 運行后端：

   python manage.py runserver
   

前端（Vue 3）

1. 創建Vue 3項目：
   • 確保你已經安裝了 vue@latest。如果沒有安裝，可以使用以下命令安裝：

   npm create vue@latest
   

   • 選擇默認配置或根據提示進行自定義配置。
2. 編寫Vue組件：
   • 在 src/views/Home.vue 中修改代碼以調用后端API：

   <template><div><h1>Vue 3與Django集成示例</h1><p>{{ responseData.message }}</p></div>
   </template><script setup>
   import { ref } from 'vue';
   import axios from 'axios';const responseData = ref({});const fetchData = async () => {try {const response = await axios.get('http://127.0.0.1:8000/api/data/');responseData.value = response.data;} catch (error) {console.error('Error fetching data:', error);}
   };fetchData();
   </script><style scoped>
   /* 樣式 */
   </style>
   

3. 運行前端：
   • 在項目目錄中運行以下命令啟動Vue開發服務器：

   npm run dev
   

現在，Vue 3前端應用可以成功調用Django后端提供的API，并展示返回的數據。請確保后端和前端服務器都在運行，并且根據實際情況調整API的URL。