如何将Vue.js与Django集成

Question

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

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

Answer 1

我没有Django经验，但是;-)最简单的集成Vue的方法是在.js文件中创建vue组件，而不是.vue文件。只要将Vue内容放入.vue文件中，就需要捆绑，因此您正在谈论SPA。在.js文件中定义组件。使用模板字符串（反引号）作为模板属性。相对于.vue文件，唯一丢失的是组件范围的css。你需要小心一点Vue并没有破坏现有的DOM操作代码，但这是一个非常可行的方法。

Answer 2

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

1. 使用脚本标签直接集成到HTML中（如果有效，则非常有效 您想要的只是实现一些小功能，并避免 使用jQuery）。
2. 将其放在JS文件中，如@bbsimonbb所述 （但我不建议这样做，该项目很快就变成了 难以维护，并增加了使用HTML的难度。
3. 处理.vue文件并转为SPA。

对于Django，使用django-webpack-loader包在第一个选项和第三个选项之间进行了另一种选择。按照存储库中的教程进行操作很容易实现功能，并且在此过程中避免进行CORS管理。