Django+Vue项目创建与运行指南

一、项目概述
本指南将指导你创建一个基于Django和Vue.js的Web项目。Django是一个高级Python Web框架，用于快速开发安全和可维护的网站。Vue.js则是一个流行的JavaScript框架，用于构建用户界面。通过结合两者，我们可以构建一个功能丰富、性能卓越的Web应用程序。
二、技术选型

1. 后端：Django框架，使用Python语言编写。
2. 前端：Vue.js框架，使用JavaScript语言编写。
3. 数据库：Django默认使用SQLite，但你可以根据需要选择其他数据库系统，如MySQL、PostgreSQL等。
   三、开发环境搭建
4. 安装Python：访问Python官网下载并安装最新版本的Python。
5. 安装Node.js：Vue.js依赖于Node.js，请确保已安装最新稳定版。
6. 安装Django：使用pip（Python包管理器）安装Django。在终端中运行以下命令：

   pip install django

7. 安装Vue CLI：Vue CLI是Vue.js的官方脚手架工具，用于快速创建Vue项目。在终端中运行以下命令：

   npm install -g @vue/cli

8. 创建虚拟环境：使用虚拟环境可以隔离不同项目的依赖项，推荐使用virtualenv或venv。按照你的喜好选择一个并按照官方文档创建虚拟环境。
9. 创建项目目录：在你的项目目录下创建一个新的文件夹，作为项目的根目录。例如，你可以将其命名为my-django-vue-project。
10. 初始化Django项目：进入项目根目录，运行以下命令初始化Django项目：

    django-admin startproject myproject

    这将创建一个名为myproject的文件夹，其中包含Django项目的所有文件和文件夹。
11. 创建Vue项目：在项目根目录下，运行以下命令创建Vue项目：

    vue create my-vue-app

    按照提示选择适合你的配置选项或直接使用默认配置。这将创建一个名为my-vue-app的文件夹，其中包含Vue项目的所有文件和文件夹。
12. 配置静态文件路径：在Django项目中，需要配置静态文件路径以指向Vue生成的静态文件。打开myproject/settings.py文件，找到’STATICFILES_DIRS’设置，将其添加到你的静态文件路径中，例如：

    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

    将’static’替换为你的Vue项目的静态文件目录路径。确保该目录与Vue项目的public文件夹相对应。
13. 启动项目：在终端中运行以下命令启动Django开发服务器：

    python manage.py runserver

    这将启动一个本地开发服务器，并在浏览器中打开默认项目页面。对于Vue项目，你可以使用以下命令启动开发服务器：

    cd path/to/my-vue-app
    vue-cli-service serve

    这将启动Vue开发服务器并在浏览器中打开默认页面。
14. 集成前后端：在Vue项目中，你可以通过代理设置将前端的请求转发到后端Django服务器。在Vue项目的根目录下找到vue.config.js文件（如果没有则创建一个），添加以下配置：
    javascript podcastApi: { target: 'http://localhost:8000', // 后端服务器地址和端口号 changeOrigin: true, pathRewrite: { '^/api': '' // 将所有以/api开头的请求路径去掉/api前缀 } }确保将’http://localhost:8000'替换为你的Django开发服务器的地址和端口号。保存文件后重新启动Vue开发服务器。现在，你的Vue应用程序将通过代理将所有/api请求转发到Django后端服务器。
    四、代码编写与测试
    在完成开发环境搭建后，你可以开始编写代码和进行测试了。这里是一个简单的例子来展示如何进行前后端交互