Django+Vue.js创建前后端分离项目

1、使用django创建项目：

django-admin startproject ocr_manager

2、进入项目根目录，创建django的App：

python manage.py startapp backend

3、在项目根目录创建Vue项目：

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
│   │   │   └── Hello.vue
│   │   └── main.js
│   ├── static
│   └── test
│       └── ...
├── manage.py
└── ocr_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── template
│   ├── index.html
│   ├......
├── manage.py
└── ocr_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

 

4、打包Vue项目：

cd frontend          #  进入到创建的

cnpm install         #  安装需要的因依赖库

cnpm run dev      #  运行调试的服务，启动web服务。

cnpm run build    #  打包vue项目，会将所有东西打包成一个dist文件夹

修改django的settings：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/dist'],         #更改这里
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATICFILES_DIRS = [             ## 添加静态文件路径
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

运行服务：python manage.py runserver