Django和Vue都具有獨特的前端優勢。Django的上下文驅動模板視圖提供了從後端模型內容直接快速開發頁面的功能。Vue的現代reactive組件為在豐富的Javascript生態系統中構建複雜的UI提供了強大的工具。

然而，將Django和Vue同時使用的典型解決方案削弱了單獨使用其中一種的優勢。例如，一種常見的方法是使用Django Rest框架作為後端，然後用Vue編寫整個前端，這樣就很難在方便的地方使用Django模板。第二種方法是在Django模板中使用Vue，通過使用瀏覽器<script>標記將Vue代碼引入,但是這樣做就喪失了使用Vue單個文件組件的能力。

最近我啟動了一個項目，我想同時使用Django模板和Vue，而不相互影響。我的站點的大多數頁面都是相對靜態的後端數據列表，交互性有限，這正是Django僅用幾行代碼就能做到的。但我還有很少的頁面包含了更複雜的數據驅動交互區域，而這是Vue的強項。我能不能找到一種方法，在使用Vue豐富頁面的部分內容的同時，在更簡單的頁面上使用Django模板，所有這些都在一個易於管理的配置中呢?

我可以同時擁有兩個框架的優勢嗎?

那是當然!如果不是這樣，這篇文章就顯得非常無關緊要了。

Django Webpack載入器和Vue多頁面應用程序

這個解決方案的關鍵部分是django -webpack-loader Django應用程序和Vue支持多頁面應用程序的能力。通過結合這些工具，我們可以構建一個標準的模板驅動的Django應用程序，該應用程序在Django視圖中包含一個或多個獨立的webpack包。每個包都是一個單獨的Vue「頁面」，該頁面可以使用所有標準的Vue/Javascript/Webpack工具來構建。

調整Django項目來使用Vue

在本文餘下的部分中，我將演示如何修改一個基本的模板驅動的Django應用程序，以使用Vue的單個文件組件。我省略了構建一個簡單Django站點的步驟，因為它已經有了很詳細的文檔，但是如果你想要一個更簡單的起點，你可以從example_start標記處訪問並使用本文的示例倉庫。

出於本文的目的，我假設你有兩個工作模板，你希望將單獨的Vue組件添加到其中。

在我的示例倉庫中，這兩個工作模板是templates/vue_app_01.html和templates/vue_app_02.html。

添加一個簡單的Vue項目

首先，我們將在Django項目的子目錄中嵌入整個簡單的Vue項目。首先，確保你安裝了Vue CLI。

然後，我們將使用CLI來構建通常要有的 Vue 開始項目，並將其放在vue_frontend目錄中

你只需要接受CLI提供的所有預設值即可。當該項目成功創建時，你會看到CLI的報告信息。我們可以啟動它來驗證我們的開始項目是否正常工作:

將瀏覽器指向啟動服務命令報告給你的URL(可能是http://localhost:8080)，你應該就會看到Vue示例應用程序。

關於如何配置/自定義這個項目的指南或教程，請查看vue-cli文檔

將Vue單頁應用程序轉換為多頁應用程序

這個開始項目只有index.js一個入口點。我們將把這個項目轉換為使用多個「頁面」作為入口點的項目。

首先，我們需要一個助手包webpack-bundle-tracker來幫助我們跟蹤由這些多個頁面創建的bundle包。你可以從vue_frontend目錄運行以下命令，將該助手包添加到項目中。

接下來，我們將重新配置這個Vue項目。創建帶有以下內容的vue_fontend / vue.config.js文件:

我們來研究一下這個配置。

在前面，我們聲明了一個包含頁面vue_app_01和vue_app_02的列表，它們將成為我們bundle包的名稱，並且我們還為為每個頁面定義入口點。注意main.js附帶了我們的開始應用程序，但是我們還沒有構建newhampshir.js。我們稍後將構建它。

publicPath部分定義了Django將如何定位我們的bundle包。我們有兩種變體可以使用，一種用於生產，另一種用於非生產。在生產中，我們將publicPath設置為空，通過此操作來向django -webpack-loader發出信號，使其退回到Django的標準靜態查找器行為。但是，在非生產模式下，我們將覆蓋此命令並將其指向我們自己的webpack開發伺服器。

outputDir定義了用於生產的Javascript/CSS將放在什麼地方。這很可能是你的Django應用程序的一個靜態文件位置。

接下來，我們使用splitChunks插件優化我們的構建，對它進行配置使其能夠將任何供應商的javascript提取到一個共享bundle中。這樣我們就能夠保持我們組件的javascript文件很小，並允許瀏覽器在多個頁面之間移動時可以緩存常用的javascript。

默認情況下，Vue會為我們的bundle構造相應的html文件，但是我們不需要這些文件，因為我們可以從Django模板中獲取這些文件。通過從配置中刪除適當的插件，我們可以阻止這些文件的生成。

BundleTracker插件將創建一個vue_frontend/webpack-stats.json文件, 用來描述此構建過程生成的bundle資源包。此文件最終將被django-webpack-loader用來標識和提供我們的bundle資源包。稍後我會詳細介紹。

__STATIC__別名是Alejandro Riera Mainar首先描述(我認為)的一個巧妙的技巧。它允許我們在Vue組件中按照下邊的形式來引用靜態文件的路徑:

最後，我們來配置一個用於非生產模式的開發伺服器，並允許我們在前端開發期間熱載入Vue組件。

現在已經配置了Vue，我們需要創建我們的組件。這些組件可以是任何Vue應用程序，但是對於本文，我將只修改starter項目。我們將starter項目的main.js和App. vue轉換成另一個稍微不同的應用程序。

接下來，使用vim或你最喜歡的簡潔的編輯器去更新src/newhampshir.js，使其指向我們新的App02組件，或者，如果你有sed工具，只需運行以下代碼:

同樣，對這個App02組件做一個簡單的更改，這樣我們就能夠從瀏覽器中識別它。再次使用一個編輯器或簡單地運行:

現在我們的Vue前端已經準備好了。我們可以通過執行yarn build命令來確認所有東西都已經正確地構建了。你應該會看到一些與下面類似的結果:

對Django進行配置使其使用webpack bundle資源包

現在我們的Vue應用程序正在正確地構建bundle資源包，我們只需要指導Django如何定位和解析這些包。django-webpack-loader項目為我們解決了這方面的大部分問題。在你的requirements.txt中加入以下行，將這個包添加到你的Django應用程序中:

然後安裝新的依賴項：

在你的Django設置文件中(例如settings.py)，將webpack_loader添加到INSTALLED_APPS列表中。

在相同設置文件的其他地方，添加以下行:

這個配置會將django-webpack-loader指向我們在Vue構建期間生成的stats文件。

到這裡差不多就完成了。最後一步是修改模板，將我們新的Vue應用程序包括進來。選擇一個你現有的Django模板文件(在我的例子中是vue_app_01.html)，並添加以下內容:

這段代碼為我們的應用程序預留了一個容器，然後將來自供應商的bundle包和我們的vue_app_01 bundle包所需要的所有Javascript和CSS包含進來。注意，你可以將任何現有的Django模板代碼混合到這些新增代碼中。

選擇第二個模板並包含相同的內容，除了替換vue_app_02 bundle包。

運行這個應用程序

要在開發模式下運行我們的應用程序，我們需要同時提供Django的開發伺服器和webpack開發伺服器。從vue_frontend目錄中運行:

並且，在Django根目錄中的另一個終端中運行Django開發伺服器，例如。

將瀏覽器指向你的Django應用程序(例如http://localhost:8000)，查看你修改的兩個頁面。你應該能看到你的模板，但是現在每個模板都運行著一個單獨的Vue組件。

檢查瀏覽器的開發控制台，你可以看到Vue JS/CSS是由我們的webpack開發伺服器提供的。再有，這兩個組件共享著相同的chunk-vendor .js bundle包。此外，我們可以通過更改我們的組件之一來演示熱重載是正確運行的。不需要重新載入，更新就會直接在瀏覽器中生效。

是時候進行部署的時候，或者當我們只是想要省略運行Vue 開發伺服器時，我們就可以在生產模式中構建我們的Vue項目。如果 yarn serve進程正在運行，就取消它，並運行yarn build。優化後的bundle包將內置於我們的Django靜態文件位置,並且 webpack-stats.json將會被更新來生效這個新配置。回到你的web瀏覽器，重新載入頁面，你會看到Vue JS/CSS bundle包現在已經從標準靜態文件位置來載入了。

結論

結合Django模板和Vue並不要求你在這兩種模板的優點上做出妥協。使用本文描述的技術，你可以在項目中任何適當的時間和地點自由地利用它們。

補充說明

本例中使用的Vue組件非常簡單，但是你可以隨心所欲地將它們變得複雜，通過Vuex和Vuetify等技術、第三方node模塊或其他webpack配置。只需修改你的Vue/Webpack配置，就像使用任何標準的Vue項目一樣。

使用這項技術，你就不受限於每頁只有一個Vue組件。如果你希望將多個組件掛載在單個頁面上的單獨容器中，只需使用一個單獨的選擇器來相應地掛載每個組件。

我不提倡任何特定的生產配置方法。你可能希望提交一個生產webpack-stats.json，為開發/生產環境維護兩個單獨的版本，或者將bundle包的構建和webpack-stats.json包含到你的交付進程中。

致謝

Rodrigo Smaniotto的那篇極好的文章——「使用Vue CLI 3和Webpack Loader將Django和VueJs集成在一起」——教會了我如何使用django-webpack-loader去集成一個Vue單頁面應用程序。本文描述的大部分django-webpack-loader配置都是基於他的研究工作。

Rodrigo的文章和本文還使用了Alejandro Riera Mainar的「使用Django + webpack + Vue建立一個易於開發和部署的新項目(第1部分)」這篇文章中的內容。

源碼

在Github上查看django-vue-mpa(https://github.com/ilikerobots/django-vue-mpa )。

英文原文：https://qiniumedia.freelycode.com/vcdn/1/%E4%BC%98%E8%B4%A8%E6%96%87%E7%AB%A0%E9%95%BF%E5%9B%BE3/django-vue-best-frontend.pdf

譯者：天天向上

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！