Django vue前后端分離整合過程解析

更新時(shí)間：2020年11月20日 10:32:19 作者：官爺

這篇文章主要介紹了Django vue前后端分離整合過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

最近接到一個(gè)任務(wù)，就是用django后端，前段用vue，做一個(gè)普通的簡單系統(tǒng)，我就是一搞后端的，聽到vue也是比較震驚，之前壓根沒接觸過vue.

看了vue的一些文檔，還有一些項(xiàng)目，先說一下django與vue的完美結(jié)合吧！

首先是創(chuàng)建一個(gè)django項(xiàng)目

django-admin startproject mysite # 創(chuàng)建mysite項(xiàng)目
django-admin startapp blog # 創(chuàng)建blog應(yīng)用

一、接下來就是安裝關(guān)于vue 的東西了

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

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

3、使用cnpm 下載vue-cli cnmp install -g cue-cli

二、在django項(xiàng)目中創(chuàng)建vue項(xiàng)目

首先，進(jìn)去django項(xiàng)目的項(xiàng)目目錄中，執(zhí)行：

vue-init webpack firstvue## firstvue為前端項(xiàng)目的名稱，可自定義。創(chuàng)建的項(xiàng)目會跟django中的app一樣的目錄登記。類似一個(gè)前端app一樣。

mysite 文件夾 blog 文件夾和 firstvue文件夾要在同一目錄級別

在創(chuàng)建時(shí)，會彈出很多選擇項(xiàng)，根據(jù)自己需求自定義修改。也可以全部回車，使用默認(rèn)的。這里我就直接全部回車。

三、編寫vue前端項(xiàng)目，直接編寫就是，調(diào)試則可以執(zhí)行。也可先不編寫，跳過這一步

cd firstvue## 進(jìn)入到上一部創(chuàng)建的firstvue項(xiàng)目中
cnpm install ## 安裝需要的依賴模塊
cnpm run dev ## 運(yùn)行調(diào)式的服務(wù)，會啟動一個(gè)web服務(wù)，訪問localhost:8080 即可調(diào)式

四、vue項(xiàng)目寫完后，打包vue項(xiàng)目，然后修改django配置，將vue集成到django中

cnpm run build ## 打包vue項(xiàng)目，會將所有東西打包成一個(gè)dist文件夾

五、接下來就是配置django中的setting文件了：