django 與 Vue 的結合使用說明

1、第一步有一個Django項目

　　先是創建一個Django項目

　　　　django-admin startproject demo

　　然后創建一個application應用

　　　　python manage.py startapp app1

　　最后將App1注冊到Django應用中去

 

2、第二步在Django的項目目錄下，創建Vue項目

　　1、首先安裝node.js，官網地址：https://nodejs.org/zh-cn/download/

　　2、使用npm淘寶鏡像，避免npm下載速度過慢的問題   npm install -g cnpm --registry=https://registry.npm.taobao.org 

　　3、用npm安裝vue-cli腳手架工具（vue-cli是官方腳手架工具，能迅速幫你搭建起vue項目的框架）：

　　　　`npm install -g vue-cli`
　4、創建一個Vue項目，使用命令
　　　　vue init webpack appfront
　　創建項目會出現各種配置，可以默認，然后出現兩行命令提示
　　　　cd appfront #進入vue項目目錄
　　　　npm run dev #測試vue項目是否成功創建

 

* npm run build        ## 打包vue項目，會將所有東西打包成一個dist文件夾  
好了，兩個項目都創建成功了，只需要通過橋梁，連接在一起就行
1、替換Django模板路徑
　　

2、配置靜態文件路徑

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'appfront/dist/static')]
最后：配置Django路由

from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
]

最后啟動Django項目，python manage.py runserver

 

看路由端口，是8000說明成功了，Vue默認端口是8080
這樣就可以實現前后端分離了，嘎嘎嘎。。。