javascript - vue.js 与 Django-webpack-loader

标签 javascript django webpack vue.js

我想将 vue.js 与 Django 结合使用,但在如何将 vue 集成到 Django 模板中遇到困难。

我设法用 webpack 制作一个 bundle ,用一段 html 设置 vue,我可以在浏览器中打开“作为文件”,然后显示 vue 组件。这样就可以正常工作了。 enter image description here

enter image description here

但是,当我运行 Django 服务器时,我得到的是标签,而不是 Vue 组件: enter image description here

也许我走错了路,因为我看到其他人使用 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/

相关文章:

python - Django 管理表单 : Set the default value of a readonly field

python - Django 的方法是什么?

python - 将 cv2 框架从 View 传递到模板

config - 当设置更多参数时如何编写webpack.config.js?

javascript - 要求失败时的常量行为

javascript - 提交后如何获取发布日期?

javascript - 替换javascript中所有具有classname属性的子节点

reactjs - 奇怪的 React 编译器行为

javascript - npm start 上出现意外 token 错误的模块构建失败 - React/webpack

javascript - 将表情符号与文本分开的正则表达式