0

Estoy haciéndole una reforma a una página web y la aproveché para practicar con vue (0 experiencia con ese framework). Ya llevo avanzado el proyecto; aunque solamente tenga el index.

Lo que quiero hacer ahora, es poder utilizar el router de vue, pero me ha presentado muchos problemas. No sé cómo importar los componentes que ya tenía y luego mostrarlos. He intentado de muchas formas y lo último que intenté, fue así:

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!--Scripts vue y vuetify.-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script type="text/javascript">

    Vue.component('Principal', {

        <?php

        include 'vista/carruselIndex.php';

        include 'vista/bannerInformacionValtec.php';

        include 'vista/carruselConceptos.php';

        include 'vista/bannerEstadisticasIndex.php';

        include 'vista/vistaUsuario.php';

        include 'vista/modalImagenes.php';

        include 'vista/modalInicioSesion.php';

        ?>

    })

</script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<!--Llamados script para partículas.-->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<!--Script para inicializar vue.-->
<script type="text/javascript" src="vista/recursos/scripts/index.js"></script>

Pero la consola me dice que hay un error: Uncaught SyntaxError: Unexpected token '<' que es traído directamente de uno de los componentes incluídos con PHP, pero siempre me arroja error. Realmente no sé qué hacer.

Me habían dicho que Vue-Router era más fácil que su versión de React, pero es una gran mentira.

Nota: Estoy usando todo por CDN, no he instalado nada. Y si me toca instalarlo, me tocaría volver a hacer todo lo que ya llevo.

10
  • porque hay codigo php adentro del componente vue? eso es totalmente nuevo para mi...
    – gbianchi
    el 15 sep. 2020 a las 15:50
  • y donde esta el router?
    – gbianchi
    el 15 sep. 2020 a las 15:50
  • y que tiene que ver vuetify con vue router? :/
    – gbianchi
    el 15 sep. 2020 a las 15:51
  • Porque no tengo ni idea de cómo meter los componentes al código de vue. Precisamente por eso es la pregunta. Y lo de vuetify es para aclarar que lo uso y no tener que escribirlo ahí. Son componentes de librería.
    – Saco04
    el 15 sep. 2020 a las 15:53
  • Y el router no lo tengo porque me arroja error y no me muestra la página.
    – Saco04
    el 15 sep. 2020 a las 15:53

1 respuesta 1

0

Amigo creo que estas tratando de llamar php en componentes javascript, una es front y la otra es back.

Vue.component('Principal', {

        <?php

        include 'vista/carruselIndex.php';

        include 'vista/bannerInformacionValtec.php';

        include 'vista/carruselConceptos.php';

        include 'vista/bannerEstadisticasIndex.php';

        include 'vista/vistaUsuario.php';

        include 'vista/modalImagenes.php';

        include 'vista/modalInicioSesion.php';

        ?>

    })

esto esta mal escrito o desarrollado.

/* debes importar primero los componentes */

import Carrusel form 'vista/carruselIndex.vue'
import Carrusel form 'vista/bannerInformacionValtec.vue'
import bannerInformacionValtec form 'vista/bannerEstadisticasIndex.vue';
import.... mas componentes

/* como la variable se llamara igual que su componente no requieres colocar clave:valor*/

Vue.component({
       carruselIndex,
       bannerInformacionValtec,
       vista/carruselConceptos,
        ...otros componentes..

    })

por convención es mejor que uses en ves de vistas revises que no sea un componente, ejemplo si haces un componentes "input" con características únicas, que luego incorporas con otros componentes como v-card este hacen una vista pero ya debe estar mas complejos, esto se llama atomicidad, llevar a cabo micro componentes a componentes mas avanzados y luego en vistas.

éxito.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.