Как использовать Vuejs SFC (однофайловый компонент) в django

fil1.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 template:

<comp1> </comp1>

Ниже приведено то, что я знаю на данный момент. Возможно, есть лучшее решение.

  • Django имеет свои собственные маршрутизаторы и шаблонизатор. Django может рендерить html-страницы по определенным URL.
  • Vue SFC имеет свои собственные маршрутизаторы. В Vue3 SFC все начинается с одного файла точки входа с id=app и оттуда мы можем направлять пользователей на различные страницы. Все делается в Vue. Никакой Django не нужен и не используется.
  • Таким образом, использование SFC с Django невозможно или не является правильным подходом.
  • Мы можем использовать 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'%}">

Используйте 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#app, вызывая:

<add-listing />

или

<edit-listing />
Вернуться на верх