Я пытаюсь внедрить компоненты vuejs в базовый шаблон моего django, но, к сожалению, компоненты не обрабатываются.Несмотря на наличие необходимых файлов vuejs js.
Итак, я внедряю файлы сборки vuejs app.js, manifest.js и vendor.js в base.html (шаблон django).Я создал компонент vuejs с именем article-list в файле ArticleList.vue.
Проблема в шаблоне 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>
Заранее спасибо.