如何将 Vue.js 与 Django 集成答案

【问题标题】：How to integrate Vue.js with Django如何将 Vue.js 与 Django 集成
【发布时间】：2018-02-12 09:25:06
【问题描述】：

我有一个经典的 Django（无 SPA）网络项目。 Django 也呈现我的模板。我想为项目中的一些前端功能（实际上是搜索字段）实现 Vue.js。我的资产目录下已经有一个基本的工作版本，其中包含单独的文件： assets/ css/ search.css js/ search.js

如何为我的项目使用单独的 .vue 组件编写结构？我应该使用 webpack + django-webpack-loader 吗？有没有更简单的方法？

【问题讨论】：

我认为可以肯定地说所有结构都是“面向组件”。你能说得更具体点吗？
你想让 Django 负责管理模板文件吗？或者你想使用 VueJS 来构建一个单页应用程序？如果您只想将它用于搜索框，您可以简单地将 VueJS 包含在 <script> 元素中。通过这种方式，您可以将一个小组件添加到您的页面，类似于您使用 jQuery 的方式。然后您需要使用axios、Fetch API 或您选择的包来向 API 发出请求。如果你想使用 Vue 组件并让 Django 负责模板，请查看：github.com/NdagiStanley/vue-django
我的问题是关于我的 Django 项目中基于最小 .vue 文件的集成。它不是SPA。关于 django-ajax-vuejs 解决方法的概念对我来说已经很清楚了。

标签： django vue.js

【解决方案1】：

我没有 Django 经验，但是 ;-) 集成 Vue 的最简单方法是在 .js 文件中创建 vue 组件，而不是在 .vue 文件中。一旦你把你的 Vue 东西放在 .vue 文件中，你就需要捆绑，所以你说的是 SPA。在 .js 文件中定义您的组件。对模板属性使用模板字符串（反引号）。相对于 .vue 文件，您唯一丢失的是组件范围的 css。您需要小心一点，Vue 不会破坏现有的 DOM 操作代码，但这是一种非常可行的开始方式。

【讨论】：

【解决方案2】：

我假设您已经知道这一点，但为了提供更好的上下文，值得指定使用 VueJS 的三种传统方式：

使用脚本标签直接集成到 HTML 中（如果你想要的只是实现小功能并避免使用 jQuery）。
在 JS 文件中执行，正如@bbsimonbb 提到的那样（但我不推荐，项目很快就变成了无法维护并增加了使用 HTML 的难度）。
处理 .vue 文件并转向 SPA。

对于 Django，在第一个和第三个选项之间有一个替代方案，使用 django-webpack-loader 包。按照存储库中的教程实现功能非常简单，并且在此过程中避免了 CORS 管理。

【讨论】：