Python Django Vue 項目建立

環境安裝忽略，可參考前面個篇幅介紹

 

一、建立項目

打開pycharm 終端，輸入以下，建立項目

# 進入pycharm 項目目錄下
cd pyWeb

django-admin startproject pyweb_dome

# pyweb_dome 是django項目名稱

 

二、建立應用

# 進入項目根目錄 pyweb_dome 下

 cd pyweb_dome 
python manage.py startapp webserver # webserver 爲應用名

 

 

三、建立前端項目

 使用vue-cli在根目錄建立一個名稱叫【frontend】的Vue.js項目做爲項目前端

# 使用vue-cli在根目錄建立一個名稱叫【webfront】的Vue.js項目做爲項目前端

vue-init webpack webfront

 

四、打包vue項目

# 使用 webpack 打包vue項目
cd webfront

npm install 

npm run build

 

此時直接運行npm run dev也能夠直接查看前端 vue界面

npm run build

 

構建完成會生成一個文件夾，名字叫dist，裏面有一個 index.html 和一個 文件夾static。

 

五、使用Django的通用視圖 TemplateView修改靜態指向路徑（就是讓Django訪問目錄指向咱們剛纔打包的dist/index.html）

找到項目根 pyweb_demo/urls.py文件做出以下修改，注意一、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  # 一、增長該行

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'',TemplateView.as_view(template_name='index.html')),  #二、 增長該行
]

 

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