带有 Django-webpack-loader 的 vue.js

Question

我想将 vue.js 与 Django 一起使用，但遇到了如何将 vue 集成到 Django 模板中的问题。

我设法用 webpack 制作了一个包，用一段 html 设置 vue，我可以在浏览器中打开“作为文件”，然后显示 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>

主要.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、sass、其他 js 库等。 正如您所看到的，css 样式确实通过了，所以我认为 vue 标签应该以相同的方式工作？！ 此外，来自 Django 静态文件夹的静态文件也可以“正常方式”使用。 将 bundle.js 放在静态文件夹中并将其引用为：

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

它确实有效。 那么为什么不通过 Django-webpack-loader 呢？

Answer 1

我注意到 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>

带有 Django-webpack-loader 的 vue.js

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-05-27 14:53:05

带有 Django-webpack-loader 的 vue.js

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-05-27 14:53:05

解决方案1
3 已采纳 2016-05-27 14:53:05