1

Les comento: Estoy haciendo un tp para la carrera. Tengo que usar vue desde js, vuetify, y vue-router. Lo que me pasa es que nose porque solo me toma el vuetify, pero no los 2 componentes de vue que creé ni las rutas. Creo que es un problema por el orden de los scripts en el index.html o algo asi. Tampoco tengo mucha experiencia en vue, asi que puede ser que algo este mal en mi codigo tambien.

Aviso, es un proyecto muy básico para armar tareas, y también hay cosas que solo están de prueba, como los parallax de vuetify.

Dejo el codigo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>Parcial 2 - Aplicaciones para dispositivos móviles</title>
   
    <link rel="stylesheet" href="css/estilos.css">  
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/bootstrap.css">  
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
</head>


<body>    
    <v-app> 
    <div class="container contenedor-tareas"> 
        <header class="row">
            <nav class="col navbar fixed-top navbar-expand-md navbar-dark fondo-header">    
              <img src="imagenes/logo-sitio.png" alt="Logo del sitio" class="p-1" style="width: 150px;">               
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu-fijo" aria-controls="menu-fijo" aria-expanded="false" aria-label="Menú Hamburguesa">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-start justify-content-md-end" id="menu-fijo">                          
                  <ul class="w-75 navbar-nav justify-content-around">                       
                      <li class="nav-item"><router-link class="nav-link" to="/" data-ancla="true" data-freno="60">Home</router-link></li>                                           
                      <li class="nav-item"><router-link class="nav-link" to="/contacto" data-ancla="true" data-freno="60">Contacto</router-link></li>                                                                  
                  </ul>                                            
              </div>                                             
            </nav>    
        </header>  
      <router-view></router-view>
                    
    
            <template id="tareas-1">
               <v-parallax dark src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
                  <v-row align="center" justify="center">
                    <v-col class="text-center" cols="12">
                       <h1 class="row">Organizador de Tareas</h1>       
                       <div class="row">  
                          <p class="col-7 animate__backInUp">La matriz de Eisenhower es una técnica para priorizar tareas que bien podría ser la respuesta a tus problemas de listas de pendientes sobrecargadas y a esas notificaciones de pesadilla.<br>Es una manera fácil y , sin embargo, extremadamente efectiva, de averiguar cómo priorizar tus tareas de tal manera que las más importantes no se opaque con respecto de las tareas urgentes, repentinas e inesperadas.<br>La idea general es que todas tus tareas se pueden organizar en cuatro cuadrantes, cuyos ejes corresponden a la importancia y la urgencia. Estos cuatro cuadrantes tienen valores que van desde 1 hasta 4 según su prioridad.</p>
                          <img class="col-5" src="imagenes/matriz-de-eisenhower.png" alt="Matriz de Eisenhower">
                          <form-tareas class="col-12"></form-tareas>                                            
                       </div>                       
                    </v-col>
                  </v-row>
               </v-parallax>
            </template>

            <template>
                <v-parallax height="300" src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"></v-parallax>
             </template>
             <contacto></contacto>
           
    </div>
    </v-app>  
    
   
   
    <script src="js/vue.min.js"></script>     
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>   
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>  

    <script src="js/router/rutas.js"></script> 


    <script src="js/componentes/form-tareas.js"></script>  
    <script src="js/componentes/contacto.js"></script>         
    
    <script src="js/jquery-3.5.1.js"></script>  
    <script src="js/bootstrap.bundle.min.js"></script>
 
  
</body>
</html> 

Y el archivo de rutas.js en en que se encuentras las rutas del vue-ruter y el inicializador de vue:

const home = { template: `<template id="tareas-1"></template>`, 
                   name: "home"
}
const contacto = {template: `<contacto></contacto>`, 
                      name: "contacto"
}


const routes = [
    { path: '/', component: home },
    { path: '/contacto', component: contacto },
    { path: '*', redirect: '/' }  
]
  
      
const router = new VueRouter({
    routes,
});




const app = new Vue({   
    el:".contenedor-tareas",
    router,  
    vuetify: new Vuetify()
});

En los scripts los que dicen "form-tareas.js" y "contacto.js" de la carpeta js, son dos componentes distintos de vue que hice, que si se ve son llamados en el html ambos.

Para mi es tema o del orden de los scripts en el html, o por donde ubique el inicializador de vue.

Si me ayudan a resolver esto dentro de las 18hs restantes se los agradecería mil. Hasta les pagaría algo, tendria que ver cuanto por el tema del cambio :D, pero unos $1500 argentinos.

1 respuesta 1

1

Seguramente contesto muy tarder, pero si necesitas usar vuetify, lo más recomendable es que crees tu proyecto desde el cli de vue, y luego, lo agregues como plugin.

Tu Respuesta

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

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