在Django中使用Vue [英] Using Vue with django

问题描述

我最近开始使用Django在一些社交媒体网站上.我使用默认的 django 模板引擎填充页面.但是目前，我想添加 javascript 以使网站更加动态.这意味着:

I've recently started on some social media web site using Django. Im using the default django template engine to fill my pages. But at this moment, I want to add javascript to make the site more dynamic. This means:

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

• The header and footer is the same on each page. The header should have a dropdown menu, a search form that searches when you're typing.
• My current django application has a base template that has the header and footer HTML, since every page should have this.
• The site consists of multiple pages, think of index page, profile page, register page. Each of these pages have some common but also a lot of different dynamic components. For example the register page should have form validation on the fly, but the profile page doesn't need this. The profile page should have a status feed with infinite scrolling.

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

I want to use Vue to deal with the dynamic components, but I don't know how I should get started. The application should not be a SPA.

• 我应该如何构造 Vue代码?
• 我应该如何捆绑这个.使用Gulp吗?还是 django-webpack-loader ?
• 我仍然应该能够使用Django模板标签，例如，我希望能够使用下拉菜单中的 {％url'index'％} .

• How should I structure the Vue code?
• How should I bundle this. Using Gulp? Or maybe django-webpack-loader?
• I should still be able to use the Django template tags, for example I want to be able to use {% url 'index' %} in the dropdown menu.

推荐答案

这看起来像是基于观点的问题，没有明确的答案.

This looks like an opinion based question for which there is no clear answer.

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

You mentioned that you do not want the app to be a Single Page Application (SPA). If so, what is the motivation for using Vue? To handle user interactions within page?

Vue在非SPA上下文中可以正常运行.它将帮助您处理页面内的丰富交互，例如将数据绑定到下拉菜单，表单等.但是，当您在SPA上下文中使用Vue时，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.

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

For your case, I would recommend using Vue.js in standalone mode, where you can quickly define template within Vue components and write all your code easily in one javascript file.

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

在"Vue.js独立模式"下，不需要任何Webpack构建系统或 vue-cli .您可以在django的现有开发环境中直接构建该应用程序. gulp 可以选择正常地最小化和捆绑您的javascript文件，就像您使用基于jQuery的应用程序一样.

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. gulp can optionally minify and bundle your javascript files normally, just like you do with your jQuery based apps.

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

Vue.js uses double curly braces {{..}} for templates, so it will not interfere with your django template strings.

Vue.js的所有jsFiddle示例均以独立模式运行.这正是您此时所需要的.您可能会使用 vue.js 标签查看最近的一些问题，找到一个示例jsFiddle并查看其完成方式.

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.js tag, find a sample jsFiddle and see how it is done.

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

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.

这篇关于在Django中使用Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！