如何在django中使用Vuejs SFC(单文件组件)

Question

filt1.vue

<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg">
</template>

我想在我的Django模板中呈现这个。

以前使用普通vue组件时，我可以按如下方式使用它们：

JS文件：

Vue.component('comp1', {...})

django-html模板：

<comp1> </comp1>

更新04-08-2022

我能够用id=app-我的github repo 将App.vue安装在django-div元素上

• 唯一可行的方法是在homepage.html中设置id=app。在django homepage.html中有没有其他方法可以渲染App.vue
• 有没有一种方法可以直接在我的django模板中使用组件<HelloWorld>

如果有人能提供一个链接到使用了带有django的SFC的公共github回购，那将很有帮助。

Answer 1

以下是我目前所知道的。也许有更好的解决方案。

Django有自己的路由器和模板引擎。Django可以在某些URL上呈现html页面

Vue SFC有自己的路由器。在Vue3 SFC中，所有内容都从一个带有id=app的入口点文件开始，从那里我们可以将用户路由到不同的页面。一切都在Vue完成。不需要也不使用Django

因此，在Django中使用SFC是不可能的，或者不是正确的方法

我们可以将SFC用于UI，将DRF用于API。在DRF完全独立于Vue SFC的情况下，这可能是一个很好的组合

我喜欢Vue组件，也喜欢Django路由器和Django模板引擎

以下是我目前使用它的方式：

• 我不使用Vue SFC，但我使用Vue组件。我正在使用Vue2.6
• 我有django渲染的模板。它们调用不同的Vuejs组件

component1.js

Vue.component('name-comp', {
props: {

},
data: function () {
return {

}
},
watch: {

},
mounted: async function () {

},
methods: {


},
template: `

`,
delimiters: ["[[", "]]"],
});

h1.html

<name-comp></name-comp>
<script type="text/javascript" src="{% static 'app1/js/component1.js'%}">

Answer 2

以这种方式使用customElements和defineCustomElement

import { createApp } from 'vue'
import { defineCustomElement } from 'vue'
import App from './App.vue'
import AddListing from "./components/AddListing.vue";
import EditListing from "./components/EditListing.vue";
// Add Listing form
customElements.define('add-listing', defineCustomElement(AddListing))
customElements.define('edit-listing', defineCustomElement(EditListing))
const marketApp = createApp(App)
marketApp.mount('#app')

然后，您可以在div#应用程序之外使用它，方法是调用：

<add-listing />

或

<edit-listing />