vue django项目

### 集成 Vue 和 Django 的方法

为了在一个项目中集成 Vue 和 Django，可以采用前后端分离的方式。在这种架构下，Django 主要作为 RESTful API 后端服务来提供数据接口以及处理业务逻辑；而 Vue.js 负责构建单页面应用程序 (SPA)，并通过 HTTP 请求与后端通信获取所需的数据。

#### 创建 Vue 应用程序

首先，在本地环境中准备好必要的工具链版本：

node -v # v18.18.2
npm -v  # 9.8.1
vue --version # @vue/cli 4.5.13

接着利用 `@vue/cli` 工具快速初始化一个新的 Vue 项目结构[^1]：

vue create frontend
cd frontend
npm run serve

这会启动一个带有热重载功能的开发服务器用于前端调试。

#### 设置 Django 项目支持静态资源加载

为了让 Django 正确识别来自 Vue 构建后的静态文件和服务模板，需调整项目的设置文件 (`settings.py`) 中关于模板查找路径和静态文件目录的部分内容如下所示[^3]:

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/dist')],
        ...
    },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

上述更改使得 Django 可以找到由 Vue 打包生成的 HTML 文件及其关联的 CSS/JS 等静态资产。

#### 定义 URL 映射规则

最后一步是在 Django 的路由配置(`urls.py`)里加入指向 Vue SPA 入口页的映射关系，并确保其他 API 接口也能正常工作[^4]:

from django.contrib import admin
from django.urls import path
from app.views import index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),  # 将根路径请求转发给 Vue 处理
]

此时整个系统的基础设施搭建完毕，接下来就可以按照各自的技术栈分别迭代优化前后两端的功能特性了。