¿Cómo puedo cargar una aplicación VueJS de una plantilla usando webpack?

Estoy empezando a VueJS y estoy tratando de añadirlo a mi proyecto Django usando Webpack-Loader.

Tengo los siguientes dos archivos:

App.vue

App02.vue

Aquí está mi main.js:

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;

/* NOTE: unlike index.js, we are not passing props from our template, so the following render/mount 
  syntax is ok */

new Vue({
    render: h => h(App),
}).$mount('#app');

Y finalmente, aquí está mi plantilla de Django html:

{% load render_bundle from webpack_loader %}


{% block content %}

    
My second Vue app goes here


    

        
    

    
    {% render_bundle 'chunk-vendors' %}
    {% render_bundle 'vue_app_02' %}

{% endblock %}

El problema con mi código es que no parece cargar App02, porque cuando cargue el html veré Bienvenido a tu primera Aplicación Vue y no Bienvenido a tu segunda aplicaciónAunque, desde mi plantilla, estoy cargando vue_app_02.

Sé que esta pregunta es muy básica, pero soy muy nueva en esto y todo es muy confuso, no entiendo lo que necesito main.js y otros archivos como index.js, index.html. Cualquier tipo de consejo es apreciado

Pregunta hecha hace 3 años, 4 meses, 27 días - Por javajedi

3 Respuestas:

  • Debes añadir app02. vue en el router vue

    Este sitio puede ayudarle a crear el router vue

    https://saidhayani.medium.com/understand-routing-in-vue-js-with-examples-6da96979c8e3

    Respondida el Dec 19, 2020 a las 15:30 - por csharpsorcerer

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a que estás importando y montando el componente App en tu archivo main.js, pero en tu plantilla de Django estás intentando renderizar el componente App02.

    Para solucionar este problema, puedes seguir estos pasos:

    • En tu archivo `main.js`, importa y monta el componente `App02` en lugar de `App`. Deberías tener algo como esto:
    javascript
import Vue from 'vue/dist/vue.js';
import Vuex from 'vuex';
import storePlugin from './vuex/vuex_store_as_plugin';
import App02 from './App02.vue'; // Importa el componente App02 en lugar de App

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App02),
}).$mount('app');
    • Asegúrate de que en tu plantilla de Django estás renderizando correctamente el componente correspondiente. Deberías tener algo como esto:
    html
{% load render_bundle from webpack_loader %}

{% block content %}

  
    My second Vue app goes here
    

  
     
    
  
    

  {% render_bundle 'chunk-vendors' %}
  {% render_bundle 'vue_app_02' %}

{% endblock %}

    Con estos cambios, deberías poder cargar y renderizar correctamente el componente App02 en tu aplicación VueJS. Recuerda que es importante que los nombres de los componentes coincidan entre tu código VueJS y tu plantilla de Django para evitar confusiones.

    Respondida el Dec 20, 2020 a las 15:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Lo que estás experimentando se debe a un malentendido en la forma en que VueJS se renderiza y se carga. Aquí hay algunos puntos clave que pueden ayudarte a resolver el problema:

    • webpack-loader: webpack-loader es una herramienta que te permite cargar archivos VueJS en tu proyecto Django. Crea paquetes que contienen tu código VueJS y sus dependencias.
    • App.vue y App02.vue: Estos son tus componentes VueJS. Cada componente representa una parte de tu interfaz de usuario. App.vue es el componente principal que contiene otros componentes, mientras que App02.vue es un componente separado que muestra un mensaje diferente.
    • main.js: Este archivo es responsable de crear una instancia de la aplicación VueJS y montarla en un elemento HTML. En este caso, la aplicación está montada en el elemento `
      app`.
      - Plantilla HTML de Django: Tu plantilla HTML carga los paquetes creados por webpack-loader. `chunk-vendors` contiene código común compartido entre tus paquetes, mientras que `vue_app_02` contiene el código específico para App02.vue.

    Ahora, para solucionar tu problema, sigue estos pasos:

    • Crea una nueva instancia de VueJS para App02.vue: En `main.js`, agrega otra instancia de VueJS para App02.vue:
    js
new Vue({
  render: h => h(App02),
}).$mount('app02');
    • Actualiza tu plantilla HTML: En tu plantilla HTML, agrega un elemento para montar App02.vue:
    html
    • Recarga la página: Recarga la página para ver los cambios.

    Ahora debería ver "Bienvenido a su segunda aplicación VueJS App0" en la parte superior de la página, debajo del mensaje "Bienvenido a su primera aplicación VueJS".

    Consejos adicionales:

    • Mantén tus archivos VueJS separados de tus archivos Django para una mejor organización.
    • Utiliza un linter para verificar la sintaxis y evitar errores comunes.
    • Explora la documentación oficial de VueJS y Django para obtener más información sobre cómo integrar VueJS en proyectos Django.

    Espero que esto te ayude. ¡Buena suerte!

    Respondida el Dec 20, 2020 a las 15:32 - por Gemini

    Votos positivos: 0 | Votos negativos: 0