django vue 開發 文檔，python websocket django vue_Python Django Vue 項目創建過程詳解

1、創建項目

打開pycharm 終端，輸入如下，創建項目

# 進入pycharm 項目目錄下

cd pyWeb

django-admin startproject pyweb_dome

django vue 開發 文檔。# pyweb_dome 是django項目名稱

2、創建應用

# 進入項目根目錄 pyweb_dome 下

cd pyweb_dome

python manage.py startapp webserver # webserver 為應用名

3、創建前端項目

django socket，使用vue-cli在根目錄創建一個名稱叫【frontend】的Vue.js項目作為項目前端

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

vue-init webpack webfront

4、打包vue項目

# 使用 webpack 打包vue項目

cd webfront

pycharm vue，npm install

npm run build

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

npm run build

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

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

vue與django？找到項目根 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

python django。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

socket，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、增加該行

python的django框架，urlpatterns = [

path('admin/', admin.site.urls),

path(r'',TemplateView.as_view(template_name='index.html')), #2、 增加該行

]

6. 配置Django項目的模板搜索路徑和靜態文件搜索路徑 找到根目錄下 pyweb_demo/settings.py文件并打開，找到TEMPLATES配置項，修改如下:

TEMPLATES = [

vue angular。{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

#'DIRS': [],

'DIRS': ['webfront/dist'], # 修改1

'APP_DIRS': True,

'OPTIONS': {

vue python、'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

],

python django web 開源項目、},

},

]

# 新增2

# Add for vue.js

STATICFILES_DIRS = [

vue和django一點都不搭、os.path.join(BASE_DIR, "webfront/dist/static"),

]

7，到此基本就配置完成了，回退到根目錄 運行命令就可以直接查看效果

python manage.py runserver

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

時間： 2019-07-27