django 與 vue 的完美結合

最近接到一個任務，就是用django後端，前段用vue，作一個普通的簡單系統，我就是一搞後端的，聽到vue也是比較震驚，以前壓根沒接觸過vue。看了vue的一些文檔，還有一些項目，先說一下django與vue的完美結合吧！

首先是建立一個django項目

django-admin startproject mysite # 建立mysite項目 django-admin startapp blog # 建立blog應用 1、接下來就是安裝關於vue 的東西了

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

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

三、使用cnpm 下載vue-cli       cnmp install -g @cue/cli

2、在django項目中建立vue項目

首先，進去django項目的項目目錄中，執行：

vue init webpack firstvue## firstvue爲前端項目的名稱，可自定義。建立的項目會跟django中的app同樣的目錄登記。相似一個前端app同樣。

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

在建立時，會彈出不少選擇項，根據本身需求自定義修改。也能夠所有回車，使用默認的。這裏我就直接所有回車。

3、編寫vue前端項目，直接編寫就是，調試則能夠執行。也可先不編寫，跳過這一步

cd firstvue## 進入到上一部建立的firstvue項目中   cnpm install        ## 安裝須要的依賴模塊   cnpm run dev        ## 運行調式的服務，會啓動一個web服務，訪問localhost:8080 便可調式   4、vue項目寫完後，打包vue項目，而後修改django配置，將vue集成到django中

cnpm run build        ## 打包vue項目，會將全部東西打包成一個dist文件夾  

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

6、修改django的主目錄的urls文件：

7、啓動django服務，訪問localhost:8000 則能夠出現vue的首頁。

python manage.py runserver