如何在Django项目中集成vuejs？

t1qtbnec 于 2023-03-24 发布在 Vue.js

关注(0)|答案(1)|浏览(155)

我们需要创建一个完整的网站与django和vue作为一个学校项目的一部分，然而，我们有麻烦整合vue到我们的django项目。
为了简单起见，我们想直接在一个django应用程序中的index.html文件中使用vue，该文件位于templates/app/index.html中，这要归功于vue cdn。
没有vue，页面内容由django显示，但是当我们尝试在这个文件中使用vue和cdn时，什么都没有显示，我们在chrome控制台中得到这个错误：
vue.global.js：1661 [Vue warn]：组件缺少模板或呈现函数。
下面是代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>

</body>

</html>

当我们直接在chrome中运行html文件时（在django之外），一切正常，这意味着问题来自djangom。我们怀疑问题是django期望运行django模板代码而不是vuejs代码。
是否可以在django上以这种方式使用vue js，如果不可以，如何将vue与django集成？

vue.js

来源：https://stackoverflow.com/questions/75813526/how-to-integrate-vuejs-in-a-django-project

1条答案

按热度按时间

k3bvogb11#

Vue.js和Django模板语言默认使用相同的分隔符（{{和}}）。您需要将其中一个更改为不同的分隔符，例如对于Vue.js：

<div id="app">[[ message ]]</div>

<script>
    const { createApp } = Vue

    createApp({
        data() {
            return {
                message: 'Hello Vue!'
            }
        },

        delimiters: ['[[', ']]'],
    }).mount('#app')
</script>

赞(0）回复(0）举报 2023-03-24

我来回答

如何在Django项目中集成vuejs？

1条答案

相关问题

热门标签

最新问答