1、創建項目
打開pycharm 終端，輸入如下，創建項目
# 進入pycharm 項目目錄下
cd pyWeb
django-admin startproject pyweb_dome
# pyweb_dome 是django項目名稱
2、創建應用
# 進入項目根目錄 pyweb_dome 下
cd pyweb_dome
python manage.py startapp webserver # webserver 為應用名
3、創建前端項目
使用vue-cli在根目錄創建一個名稱叫【frontend】的Vue.js項目作為項目前端
# 使用vue-cli在根目錄創建一個名稱叫【webfront】的Vue.js項目作為項目前端
vue-init webpack webfront
4、打包vue項目
# 使用 webpack 打包vue項目
cd webfront
npm install
npm run build
此時直接運行npm run dev也可以直接查看前端 vue界面
npm run build
構建完成會生成一個文件夾，名字叫dist，里面有一個 index.html 和一個 文件夾static。
5、使用Django的通用視圖 TemplateView修改靜態指向路徑（就是讓Django訪問目錄指向我們剛才打包的dist/index.html）
找到項目根 pyweb_demo/urls.py文件作出如下修改，注意1、2兩處修改。
"""pyweb_dome URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView # 1、增加該行
urlpatterns = [
path('admin/', admin.site.urls),
path(r'',TemplateView.as_view(template_name='index.html')), #2、 增加該行
]
6. 配置Django項目的模板搜索路徑和靜態文件搜索路徑 找到根目錄下 pyweb_demo/settings.py文件并打開，找到TEMPLATES配置項，修改如下:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#'DIRS': [],
'DIRS': ['webfront/dist'], # 修改1
'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',
],
},
},
]
# 新增2
# Add for vue.js
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "webfront/dist/static"),
]
7，到此基本就配置完成了，回退到根目錄 運行命令就可以直接查看效果
python manage.py runserver
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
