Utiliser Vue avec django

J'ai récemment commencé sur certains médias sociaux site web à l'aide de Django. Im en utilisant la valeur par défaut django moteur de template pour remplir mes pages. Mais, en ce moment, je veux ajouter javascript pour rendre le site plus dynamique. Cela signifie:

  • L'en-tête et le pied de page est même sur chaque page. La tête doit avoir un menu déroulant, un formulaire de recherche qui recherche lorsque vous tapez.
  • Mon application django a un modèle de base qui a l'en-tête et pied de page HTML, depuis chaque page devrait avoir ça.
  • Le site se compose de plusieurs pagespense de la page d'index, page de profil, la page du registre. Chacune de ces pages ont en commun certaines mais aussi beaucoup de différents composants dynamiques. Par exemple la page du registre devrait avoir la validation d'un formulaire à la volée, mais la page de profil n'a pas besoin de cela. La page de profil doit avoir un statut d'alimentation avec l'infini défilement.

Je veux utiliser la Vue de traiter la dynamique de composants, mais je ne sais pas comment je dois commencer. L'application ne doit pas être d'un SPA.

  • Comment dois-je structure la Vue de code?
  • Comment dois-je bundle. À L'Aide De Gulp? Ou peut-être django-webpack-chargeur?
  • Je devrais toujours être en mesure d'utiliser le Django balises de modèle, par exemple: je veux être en mesure d'utiliser {% url 'index' %} dans le menu déroulant.

source d'informationauteur user6827 | 2016-10-24

  1. 18

    Cela ressemble à un avis question pour laquelle il n'existe pas de réponse claire.

    Vous avez mentionné que vous ne pas que l'application doit être un Single Page Application (SPA). Si oui, quelle est la motivation pour l'utilisation de la Vue? Pour gérer les interactions de l'utilisateur dans la page?

    Vue peut fonctionner parfaitement bien dans la non-SPA contexte. Il vous aidera à gérer des interactions riches à l'intérieur de la page, comme la liaison de vos données à des menus déroulants, des formulaires, etc. Mais la puissance réelle de Vue vient quand vous l'utilisez dans le SPA contexte.

    Pour votre cas, je vous conseille d'utiliser Vue.js dans autonome mode, où vous pouvez rapidement définir template à l'intérieur de Vue de composants et d'écrire tous facilement votre code dans un fichier javascript.

    Ici est ce que vous avez besoin de: https://vuejs.org/guide/installation.html#Standalone

    "Vue.js mode autonome", Il n'est pas nécessaire pour tout webpack système de construction ou vue-cli. Vous pouvez construire l'application directement dans votre environnement de dev pour django. gulp pouvez éventuellement rapetisser et de grouper vos fichiers javascript normalement, comme vous le feriez avec votre jQuery en fonction des applications.

    Vue.js utilise les doubles accolades {{..}} pour les modèles, de sorte qu'il ne sera pas interférer avec votre django chaînes du modèle.

    Tous les jsFiddle exemples pour Vue.js exécuter dans mode autonome. C'est précisément ce que vous avez besoin en ce moment. Vous pouvez regarder quelques-uns des récents questions avec vue.js tag, trouver un exemple de jsFiddle et de voir comment il est fait.

    Complexe SPA applications, vous avez besoin pour construire votre Vue code séparément depuis le côté serveur, de le tester à fond avec des feintes des appels AJAX, construire pour la production, puis baisse de la production finale construire votre serveur pour la fin à la fin de l'essai. C'est quelque chose que vous pouvez faire à l'avenir.