Django与Vue3项目模板的安装与配置指南

Django与Vue3项目模板的安装与配置指南

cookiecutter-vue-django Vue 3 + Vite + Django with no compromises. Use Vue SFCs directly in Django Templates, DRF not required. 项目地址: https://gitcode.com/gh_mirrors/co/cookiecutter-vue-django

项目基础介绍

本项目是一个基于Django后端和Vue3前端的开源项目模板，它利用了Vite作为前端构建工具，旨在帮助开发者快速启动一个具备现代化前端体验的生产就绪的Django项目。项目通过Cookiecutter自动化生成，提供了对Django模板和Vue单文件组件的无缝集成。

主要编程语言

• Python：后端开发语言，用于Django框架。
• JavaScript/TypeScript：前端开发语言，用于Vue3框架。
• HTML/CSS：用于构建前端页面和样式。

项目使用的关键技术和框架

• Django：一个高级的Python Web框架，鼓励快速开发和干净、实用的设计。
• Vue3：渐进式JavaScript框架，用于构建用户界面。
• Vite：现代化的前端构建工具，利用原生ESM特性提供快速的开发体验。
• Pinia：Vue3的状态管理库，用于在Vue应用中共享状态。

项目安装和配置的准备工作

在开始安装之前，请确保您的系统中已安装以下工具：

1. Python 3.8 或更高版本。
2. Node.js 和 npm（Node.js包管理器）。
3. Docker（可选，用于简化开发环境搭建）。
4. PyCharm（可选，用于IDE支持）。

详细安装步骤

步骤 1：安装Cookiecutter

打开命令行界面，执行以下命令安装Cookiecutter：

pip install "cookiecutter>=1.7.0"

步骤 2：生成项目模板

通过Cookiecutter从GitHub上的项目模板生成新项目，执行以下命令：

cookiecutter https://github.com/ilikerobots/cookiecutter-vue-django

根据提示输入项目所需的配置信息。

步骤 3：安装项目依赖

进入生成的项目目录，安装Python依赖：

pip install -r requirements.txt

接着，进入vue_frontend目录，安装前端依赖：

npm install

步骤 4：启动开发服务器

启动Django开发服务器：

python manage.py runserver

在浏览器中访问 http://127.0.0.1:8000 查看Django页面。

启动Vite开发服务器：

npm run dev

在浏览器中访问 http://127.0.0.1:3000 查看Vue前端页面。

步骤 5：配置生产环境（可选）

如果使用Docker，构建并运行生产环境：

docker-compose -f production.yml build
docker-compose -f production.yml up

如果不使用Docker，确保将前端构建为静态资源，并使用Django的collectstatic命令将它们收集到静态文件目录。

以上步骤将帮助您成功安装和配置一个基于Django和Vue3的项目模板。按照这些指南操作，您可以快速搭建一个功能完备的开发环境。

cookiecutter-vue-django Vue 3 + Vite + Django with no compromises. Use Vue SFCs directly in Django Templates, DRF not required. 项目地址: https://gitcode.com/gh_mirrors/co/cookiecutter-vue-django