Блог

Я пытался интегрировать Django 3 с Vue 3 в течение двух дней, и мне частично это удалось, но не так, как хотелось бы.

Этап. Идея состоит в том, чтобы использовать Vue 3 для компонентов, которые требуют Javascript и не важны для SEO, таких как формы бронирования и т. Д …

Интеграция с помощью django-webpack-loader для внедрения пакета в шаблоны django.

 const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: "http://0.0.0.0:8080/",
  outputDir: './dist/',

    pages: {
        main: {
            // entry for the page
      entry: 'src/main.js',
    }
    },

  chainWebpack: config => {

    config.optimization
      .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{filename: './webpack-stats.json'}])

    config.resolve.alias
      .set('__STATIC__', 'public')

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({poll: 1000})
      .https(false)
      .headers({"Access-Control-Allow-Origin": ["*"]})
  }
};

 

Это содержимое ** main.js ** это точка входа в приложение Vue3

 import { createApp, reactive, ref } from ‘vue’

const app = createApp({
el: ‘#app’,
delimiters: [’[[’, ‘]]’],
setup() {

const data = {
  returned_task: ref(''),
  temp_task: ref(''),
  modify_index: ref(-1),
  tasks: reactive([]),
}

const methods = {
  select: (index) => {
    if (data.modify_index.value === index){
      data.modify_index.value = -1;
    } else {
      data.modify_index.value = index
      data.temp_task.value = data.tasks[data.modify_index.value]
    }
  },
  deleteSelected: () => {
    data.tasks.splice(data.modify_index.value, 1);
    data.modify_index.value = -1;
  },
  updateSelected: () => {
    data.tasks.splice(data.modify_index.value, 1, data.temp_task.value);
    data.modify_index.value = -1;
  }
}

// created lifecycle event is not needed  but let's mock a delay
setTimeout(() => {
  data.tasks.splice(0, 0, ...['do this 🐱‍🐉', 'and that 🤳']);
}, 120);


return {
  ...data,
  ...methods
}

}
})

app.mount(’#app’)
 

и это в шаблоне html, где должен отображаться Vue

 <div id="app">
   [[modify_index]]
      <ul>
        <li v-for="task in tasks">[[task]]</li>
      </ul>
</div>
 

Что происходит, так это то, что внутри div # app ничего не отображается, ошибка не отображается, и я не смог найти много ссылок в Интернете.

Спасибо всем, кто может помочь мне.