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.