步骤一 : 创建项目所在文件夹。
步骤二: 进入CMD模式输入 :
django-admin startproject backend
步骤三 : 进入backend
步骤四:查看Django后端服务器情况。
显示下面情况表示正常。
步骤五 : 回退到项目根目录,输入:
django-admin startapp anime
anime是你的app的名字(anime和backend同级)
创建完成 :
接下来开始创建前端。
步骤六:使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端
vue-init webpack frontend
步骤七 :使用 webpack 打包vue项目
cd frontendnpm installnpm run build
构建完成会生成一个文件夹，名字叫dist，里面有一个 index.html 和一个 文件夹static。
步骤八 :找到backend/urls.py文件作出如下修改
from django.contrib import adminfrom django.urls import pathfrom django.views.generic.base import TemplateView # 注意加上这句urlpatterns = [# path('admin/', admin.site.urls),path('admin/', admin.site.urls),path(r'', TemplateView.as_view(template_name="index.html")),]
步骤九 :配置Django项目的模板搜索路径和静态文件搜索路径 找到根目录下 backend/settings.py文件并打开，找到TEMPLATES配置项，修改如下:
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',],},},]# Add for vue.jsSTATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/dist/static"),]
步骤十 : 运行
python manage.py runserver
Reference :/zhixi/p/9996832.html
