vue.js с Django-webpack-loader

Я хочу использовать vue.js с Django, но зацикляюсь, как интегрировать vue в шаблоны Django.vue.js с Django-webpack-loader

Мне удалось создать пакет с webpack, setup vue с куском html, который я могу открыть как файл в браузере, а затем отобразить компоненты vue. Так что это работает нормально.

Однако, когда я бегу мой сервер Django я получаю тег, а не компонент Vue:

Может быть, я на ложном пути, как я вижу, кто работает с Django REST api, и тогда вы можете работать по-разному с вашими шаблонами. Но я бы предпочел сначала просто интегрировать vue в существующие шаблоны Django, если это возможно !? Я могу это сделать и как это сделать?

test_html:

{% load render_bundle from webpack_loader %} 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Webpack Sample Project</title> 



    {% render_bundle 'main' %} 

</head> 
<body> 

<h3>[[ message ]]</h3> 
kiekeboe 


</body> 
</html>

main.js:

import '../css/custom.css'; 
import Vue from 'vue'; 

Vue.config.delimiters = ["[[", "]]"]; 

new Vue({ 
    el: 'body', 
    data: { 
     message: "Hello Vue" 
    } 
});

Дополнительная информация: настоящее время я использую: https://github.com/owais/django-webpack-loader который включает в себя все CSS, дерзость, другие JS библиотеки и т.д. через render- тег связки. Как вы видите, css-styling действительно приходит, поэтому я думаю, что теги vue должны работать одинаково? Кроме того, статические файлы из статической папки Django могут быть использованы «обычным способом». При помещении пакета bundle.js в статическую папку и ссылаясь на него как:

<script type="text/javascript" src="{% static 'main-890ab68c2f63dd3f9a2a.js' %}"></script>

это работает. Так почему бы не использовать Django-webpack-loader?

источник

2016-05-27 musicformellons

Это всего лишь статический файл. Где это связано с вашим кодом Django? Как вы настроили статические файлы? Какой URL вы собираетесь? Как вы загружаете JS в шаблон? –

@ DanielRoseman Я добавил информацию в нижней части моего вопроса. Надеюсь, это поможет. – musicformellons

@ DanielRoseman Как я теперь работал с «обычной статической папкой», теперь вопрос заключается в том, почему он не работает с django-webpack-loader. – musicformellons

Я заметил, что ссылка vue.js должна как-то появиться после тегов vue html. То же самое применяется при использовании Django-web-загрузчика, поэтому {% render_bundle 'main' %} нужно спуститься. Это заработало:

{% load staticfiles %} 
{% load render_bundle from webpack_loader %} 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Webpack Sample Project</title> 

</head> 

<body> 

<h3>[[ message ]]</h3> 
kiekeboe 

{% render_bundle 'main' %} 

</body> 
</html>

источник

2016-05-27 14:53:05 musicformellons

Отлично! Я должен проверить это. Кроме того, вы должны принять свой собственный ответ. – Ealhad

vue.js с Django-webpack-loader

ответ

Смежные вопросы