带有Django-webpack-loader的vue.js [英] vue.js with Django-webpack-loader
问题描述
我想将vue.js与Django一起使用，但是在将vue集成到Django模板中时遇到了麻烦.
I want to use vue.js with Django but get stuck how to integrate vue in the Django templates.
我设法与webpack捆绑在一起，用一块html设置vue，可以在浏览器中打开作为文件"，然后显示vue组件.这样就可以正常工作了.
I manage to make a bundle with webpack, setup vue with a piece of html which I can open 'as file' in the browser and then vue components are shown. So that is working properly.
但是，当我运行Django服务器时，我得到的是标签，而不是Vue组件:
However when I run my Django server I get the tag and not the Vue component:
也许我走错了道路，因为我看到其他人正在使用Django REST api，然后您可能会在模板上使用不同的方法.但是如果可能的话，我希望首先将vue集成到我现有的Django模板中！如果可以的话，应该怎么做?
Maybe I am on the wrong track as I see others working with an Django REST api and then you might work differently with your templates. But I would prefer first to just integrate vue in my existing Django templates if possible!? I that possible and how should it be done?
test_html:
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通过render-bundle标签包含所有css，sass和其他js库等.如您所见，css样式确实可以通过，所以我认为vue标签应该以相同的方式工作?此外，也可以正常方式"使用Django静态文件夹中的静态文件.将bundle.js放入静态文件夹并将其引用为:
Further info: I am currently using: https://github.com/owais/django-webpack-loader which includes all css, sass, other js libraries etc. via a render-bundle tag. As you can see the css-styling does come through, so I think vue tags should work in same manner?! Furthermore also static files from Django static folder can be used 'the normal way'. When putting the bundle.js in static folder and referring to it as:
<script type="text/javascript" src="{% static 'main-890ab68c2f63dd3f9a2a.js' %}"></script>
它确实起作用.那么为什么不通过Django-webpack-loader呢?
it DOES work. So why not via Django-webpack-loader?
推荐答案
我注意到vue.js参考需要以某种方式出现在vue html标记之后.使用Django-web-loader时也是如此，因此 {％render_bundle'main'％} 需要下降.这样就可以了:
I noticed that the vue.js reference needs somehow to come after the vue html tags. Same applies when using Django-web-loader, so {% render_bundle 'main' %} needs to go down. This got it working:
{% 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>
这篇关于带有Django-webpack-loader的vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
