python+Django+vue.js 首次搭建前后端分离项目

最新推荐文章于 2026-05-10 20:36:09 发布

原创

最新推荐文章于 2026-05-10 20:36:09 发布 · 1.2k 阅读

标签

#vue #django #python

本文介绍了如何使用Python的Django框架和Vue.js搭建一个前后端分离的项目。首先，通过PyCharm创建Django项目，然后在项目中创建一个名为backend的app。接着，在同级目录下利用vue-cli创建前端Vue.js项目，并添加element-ui组件。通过webpack打包Vue项目生成dist目录。最后，配置Django的TemplateView和静态文件路径，使Django能够访问前端打包后的文件，完成项目的基本配置。

python+django+vue

准备工作：IDE，【JetBrains PyCharm2018.3.5】【webpack 3.3.0】【python3.7.5】【npm5.8.0】【vue-cli2.9.6】

1、Pycharm创建第一个项目

django-admin startproject pc_admin

创建后如下所示：

.
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

2、进入项目根目录，创建一个名为 backend 的app

cd pc_admin
python manage.py startapp backend  //backend为app项目名称

创建结果目录如下：

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

3、使用vue-cli在同级根目录创建【frontend】的Vue.js项目作为项目前端

vue-init webpack frontend

创建后的目录如下：

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── frontend
│   ├── README.md
│   ├── build
│   │   └── ....
│   ├── config
│   │   ├── dev.env.js
│   │   ├── index.js
│   │   ├── prod.env.js
│   │   └── test.env.js
│   ├── index.html
│   ├── package.json
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   └── main.js
│   ├── static
│   └── test
│       └── ...
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.