- 下文中所有路径均从根目录
root开始。>为终端提示符。当前路径一般会标识在>前方的括号内，如果命令较多，则标识在代码段头部。>>>为 Python 提示符。
准备工作
安装 Django
笔者的 Python 版本是 3.5.2 。
> pip install django #安装Djando
> python
>>> import django
>>> print(django.get_version()) #获取Django版本号，验证安装
笔者安装的 Django 的版本是 1.11.4 。
安装 Node.js
参考文章 安装 Node.js 。
搭建项目
创建 Django 项目
创建 Django 项目 mysite，并在其下创建 app：backend 。
(root) > django-admin startproject mysite #创建项目
(root) > cd mysite
(root/mysite) > python manage.py startapp backend #创建app
配置 Django 项目
编辑 root/mysite/backend/views.py 文件。添加示例 API：index。
from django.shortcuts import render
from django.http import HttpResponse #添加
# Create your views here.
def index(request): #添加示例API
return HttpResponse("Hello API !") #添加
在 root/mysite/backend/ 目录中新建 urls.py 文件，内容如下。将无子路径的请求均链接到示例 API：index 。
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name='index'), #链接示例API
]
编辑 root/mysite/mysite/urls.py 文件。将路径起始处为 /api/ 的访问分配至 app：backend 处理。
""" ...... """
from django.conf.urls import url
from django.contrib import admin
from django.conf.urls import include #添加
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^api/', include('backend.urls', namespace='api')), #添加
]
编辑 root/mysite/mysite/settings.py 文件。添加 backend app 。
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'backend', #添加
]
创建超级用户。
(root/mysite)
> python manage.py migrate
> python manage.py createsuperuser
按照提示输入用户名、邮箱、密码等内容，完成超级用户的创建。
至此，完成 backend 的配置。在终端输入：(root/mysite) > python manage.py runserver，然后在浏览器中输入 http://localhost:8000/api/ 即可看到 “Hello API !”，然后在浏览器中输入 http://localhost:8000/admin/ 即可登陆超级用户。
创建 Vue.js 项目
(root/mysite)
> npm install --global vue-cli #全局安装
> vue init webpack frontend #创建项目
cd frontend
(root/mysite/frontend)
npm install #安装依赖
npm run build #构建
配置 Django 连接到 Vue.js
编辑 root/mysite/mysite/urls.py 文件。将对 /的访问链接到 index.html 。
""" ...... """
from django.conf.urls import url
from django.contrib import admin
from django.views.generic import TemplateView #添加
from django.conf.urls import include
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', TemplateView.as_view(template_name="index.html")), #添加
url(r'^api/', include('backend.urls', namespace='api')),
]
编辑 root/mysite/mysite/settings.py 文件。配置模板（即 index.html）所在路径与静态文件所在路径。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#'DIRS': [], 注释掉该行，将内容改为下面一行
'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"),
]
至此，完成 frontend 的配置。在终端输入：(root/mysite) > python manage.py runserver，然后在浏览器中输入 http://localhost:8000/ 即可看到 Vue.js 的欢迎界面（如下图）。
