我最近开始使用Django在一些社交媒体网站上。我正在使用默认的django模板引擎来填充我的页面。但是目前，我想添加JavaScript以使网站更具动态性。这表示：
- 每页的页眉和页脚均相同。标头应具有一个下拉菜单，这是一个在键入时进行搜索的搜索表单。
- 我当前的django应用程序具有一个带有页眉和页脚HTML 的基本模板，因为每个页面都应具有此模板。
- 该站点由多个页面组成，包括索引页面，个人资料页面，注册页面。这些页面中的每一个都有一些共同的但也有很多不同的动态组件。例如，注册页面应即时进行表单验证，但个人资料页面不需要此验证。配置文件页面应具有无限滚动的状态供稿。
我想使用Vue处理动态组件，但是我不知道该如何开始。该应用程序不应为SPA。
- 我应该如何构造 Vue代码？
- 我应该如何捆绑这个。使用Gulp吗？或者也许django-webpack-loader？
- 我仍然应该能够使用Django模板标签，例如，我希望能够
{% url 'index' %}在下拉菜单中使用。
这看起来像是基于意见的问题，没有明确的答案。
您提到您不希望该应用程序成为单页应用程序（SPA）。如果是这样，使用Vue的动机是什么？要处理页面内的用户交互？
Vue can work perfectly alright in non-SPA context. It will help you handle rich interactions within the page, like binding your data to drop-downs, forms, etc. But the real power of Vue comes out when you use it in SPA context.
For your case, I would recommend using Vue.js in standalone mode, where you can quickly define
templatewithin Vue components and write all your code easily in one javascript file.Here is what you need: https://vuejs.org/guide/installation.html#Standalone
In "Vue.js standalone mode", There is no need for any webpack build system or
vue-cli. You can build the app directly in your existing dev environment for django.gulpcan optionally minify and bundle your javascript files normally, just like you do with your jQuery based apps.Vue.js uses double curly braces
{{..}}for templates, so it will not interfere with your django template strings.All the jsFiddle examples for Vue.js run in standalone mode. That is precisely what you need at this moment. You may look at some of the recent questions with
vue.jstag, find a sample jsFiddle and see how it is done.For complex SPA apps, you need to build your Vue code separately from server side, test it thoroughly with dummy AJAX calls, build it for production and then drop the final production build into your server for end-to-end testing. This is something you can do in future.