Question

我正在尝试在django的基本模板中注入vuejs组件，但不幸的是，这些组件没有得到渲染。即使那里有必要的vuejs js文件。

因此，我将vuejs构建的文件app.js，manifest.js和vendor.js注入base.html（Django模板）中。我在ArticleList.vue文件中创建了一个名为article-list的vuejs组件。

问题出在django的模板内，我无法访问此组件。而是将其呈现为模板内的html标签。文件如下：

base.html ：

  <body>
    <header>
    {% include 'backend/nav.html' %}
    </header>

    <div id="app">
    {% block content %}
      {# Use this block for loading CONTENT files from other html files which extend this base.html #}
    {% endblock content %}
    </div>

    <footer>
    {% include 'backend/footer.html' %}
    </footer>

    <script src="{% static 'dist/js/app.js' %}" async></script>
    <script src="{% static 'dist/js/manifest.js' %}" async></script>
    <script src="{% static 'dist/js/vendor.js' %}" async></script>

    {% block js %}
    {# Use this block for loading JS files from other html files which extend this base.html #}
    {% endblock js %}

  </body>

home.html ：

{% extends "backend/base.html" %}

{% block title %}Home{% endblock title %}

{% block content %}
    <h3>Vue Js component Below:</h3>
    <article-list>
    </article-list> {# NOT GETTING RENDERED#}
{% endblock content %}

App.vue：

<template>
  <div>
    hello world
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import ArticleList from './components/blog/ArticleList'
export default {
  components: {
    HelloWorld, 
    ArticleList,
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

ArticleList.vue：

<template>
  <div class="hello">
    TEST from vue
  </div>
</template>

<script>
export default {
  name: 'article-list',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

谢谢。

Answer 1

您需要在Django中添加上下文处理器，才能在静态目录中添加和编译VueJS包。一种方法是使用webpack-loader用于django，并通过webpack创建相应的包，然后将配置传递给webpack-loader。

即使注入了vue js文件，Django模板也不会呈现vuejs组件

1 个答案: