python前端开发优点_Vue + Django — 使用两种前端框架的优势

Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

Django和Vue都具有独特的前端优势。Django的上下文驱动模板视图提供了从后端模型内容直接快速开发页面的功能。Vue的现代reactive组件为在丰富的Javascript生态系统中构建复杂的UI提供了强大的工具。

然而，将Django和Vue同时使用的典型解决方案削弱了单独使用其中一种的优势。例如，一种常见的方法是使用Django Rest框架作为后端，然后用Vue编写整个前端，这样就很难在方便的地方使用Django模板。第二种方法是在Django模板中使用Vue，通过使用浏览器

最近我启动了一个项目，我想同时使用Django模板和Vue，而不相互影响。我的站点的大多数页面都是相对静态的后端数据列表，交互性有限，这正是Django仅用几行代码就能做到的。但我还有很少的页面包含了更复杂的数据驱动交互区域，而这是Vue的强项。我能不能找到一种方法，在使用Vue丰富页面的部分内容的同时，在更简单的页面上使用Django模板，所有这些都在一个易于管理的配置中呢?

我可以同时拥有两个框架的优势吗?

那是当然!如果不是这样，这篇文章就显得非常无关紧要了。

Django Webpack加载器和Vue多页面应用程序

这个解决方案的关键部分是django -webpack-loaderDjango应用程序和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。