我想将 vue.js 与 Django 结合使用,但在如何将 vue 集成到 Django 模板中遇到困难。
我设法用 webpack 制作一个 bundle ,用一段 html 设置 vue,我可以在浏览器中打开“作为文件”,然后显示 vue 组件。这样就可以正常工作了。
但是,当我运行 Django 服务器时,我得到的是标签,而不是 Vue 组件:
也许我走错了路,因为我看到其他人使用 Django REST api,然后你可能会以不同的方式使用你的模板。但如果可能的话,我更愿意首先将 vue 集成到我现有的 Django 模板中!?我有可能吗?应该如何做?
测试_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-styling 确实通过了,所以我认为 vue 标签应该以同样的方式工作?!此外,Django 静态文件夹中的静态文件也可以“正常方式”使用。将bundle.js放入静态文件夹并将其引用为:
<script type="text/javascript" src="{% static 'main-890ab68c2f63dd3f9a2a.js' %}"></script>
它确实有效。那么为什么不通过 Django-webpack-loader 呢?
最佳答案
我注意到 vue.js 引用需要以某种方式出现在 vue html 标签之后。使用 Django-web-loader 时也是如此,因此 {% 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>
关于javascript - vue.js 与 Django-webpack-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37479554/