快捷導(dǎo)航

Python Django Vue 項(xiàng)目創(chuàng)建過程詳解

更新時(shí)間：2019年07月29日 14:31:43 作者：Blue·Sky

這篇文章主要介紹了Python Django Vue 項(xiàng)目創(chuàng)建過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1、創(chuàng)建項(xiàng)目

打開pycharm 終端，輸入如下，創(chuàng)建項(xiàng)目

# 進(jìn)入pycharm 項(xiàng)目目錄下
cd pyWeb

django-admin startproject pyweb_dome

# pyweb_dome 是django項(xiàng)目名稱

2、創(chuàng)建應(yīng)用

# 進(jìn)入項(xiàng)目根目錄 pyweb_dome 下

 cd pyweb_dome 
python manage.py startapp webserver # webserver 為應(yīng)用名

3、創(chuàng)建前端項(xiàng)目

使用vue-cli在根目錄創(chuàng)建一個(gè)名稱叫【frontend】的Vue.js項(xiàng)目作為項(xiàng)目前端

# 使用vue-cli在根目錄創(chuàng)建一個(gè)名稱叫【webfront】的Vue.js項(xiàng)目作為項(xiàng)目前端

vue-init webpack webfront

4、打包vue項(xiàng)目

# 使用 webpack 打包vue項(xiàng)目
cd webfront

npm install 
npm run build

此時(shí)直接運(yùn)行npm run dev也可以直接查看前端 vue界面

npm run build

構(gòu)建完成會(huì)生成一個(gè)文件夾，名字叫dist，里面有一個(gè) index.html 和一個(gè) 文件夾static。

5、使用Django的通用視圖 TemplateView修改靜態(tài)指向路徑（就是讓Django訪問目錄指向我們剛才打包的dist/index.html）

找到項(xiàng)目根 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項(xiàng)目的模板搜索路徑和靜態(tài)文件搜索路徑找到根目錄下 pyweb_demo/settings.py文件并打開，找到TEMPLATES配置項(xiàng)，修改如下:

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，到此基本就配置完成了，回退到根目錄運(yùn)行命令就可以直接查看效果