javascript - 将 Vue 与 Django 一起使用

Question

我最近开始使用 Django 开发一些社交媒体网站。我使用默认的 django 模板引擎来填充我的页面。但此时此刻，我想添加javascript，让网站更具活力。这意味着:

• 页眉和页脚在每个页面上都相同。标题应该有一个下拉菜单，一个在您输入时进行搜索的搜索表单。
• 我当前的 Django 应用程序有一个基本模板，其中包含页眉和页脚 HTML，因为每个页面都应该有这个。
• 网站由多个页面组成，例如索引页、个人资料页、注册页。这些页面中的每一个都有一些共同但也有很多不同的动态组件。例如，注册页面应该有动态的表单验证，但是个人资料页面不需要这个。个人资料页面应该有一个无限滚动的状态提要。

我想用Vue来处理动态组件，但我不知道应该如何开始。应用程序不应是 SPA。

• 我应该如何构建 Vue 代码？
• 我应该如何捆绑这个。使用吞咽？或者也许 django-webpack-loader ？
• 我应该仍然能够使用 Django 模板标签，例如我希望能够在下拉菜单中使用 {% url 'index' %}。

Answer 1

这看起来像是一个没有明确答案的观点问题。

您提到您不希望该应用成为单页面应用程序 (SPA)。如果是这样，使用 Vue 的动机是什么？处理页面内的用户交互？

Vue 可以在非 SPA 上下文中完美运行。它将帮助您处理页面内丰富的交互，例如将您的数据绑定(bind)到下拉菜单、表单等。但是，当您在 SPA 上下文中使用它时，Vue 的真正威力就会显现出来。

对于您的情况，我建议在独立 模式下使用 Vue.js，您可以在 Vue 组件中快速定义 template 并在一个 javascript 中轻松编写所有代码文件。

这是您需要的:https://vuejs.org/guide/installation.html#Standalone

在“Vue.js 独立模式”下，不需要任何 webpack 构建系统或 vue-cli。您可以直接在现有的 Django 开发环境中构建应用程序。 gulp 可以选择性地正常缩小和捆绑您的 javascript 文件，就像您处理基于 jQuery 的应用程序一样。

Vue.js 使用双花括号 {{..}} 作为模板，因此它不会干扰您的 django 模板字符串。

Vue.js 的所有 jsFiddle 示例都以独立模式运行。这正是您此刻所需要的。您可以查看最近一些带有 vue.js 标签的问题，找到一个示例 jsFiddle 并查看它是如何完成的。

对于复杂的 SPA 应用程序，您需要从服务器端单独构建 Vue 代码，使用虚拟 AJAX 调用对其进行彻底测试，构建它以用于生产，然后将最终生产构建放入您的服务器以进行端到端测试。这是您将来可以做的事情。