¿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, 5 meses, 4 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 archivomain.js
, pero en tu plantilla de Django estás intentando renderizar el componenteApp02
.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
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