1 creando un proyecto con Vue CLI
Teniendo instalado node y vue ,
me sitúo en la carpeta donde quiero crear el proyecto y ejecuto el comando:
vue create [nombre_proyecto]
Para crear un nuevo proyecto esta vez desde la consola de
VScode, nos situaemos en la carpeta donde queremos crear el proyecto (o la
arrastramos a VScode) y con el comando créate lo crearemos dándole un nombre.
Vue cli nos pedirá una serie de parámetros de configuración,
en este caso voy seleccionar una
instalación manual, podríamos crear una por defecto de vue 3, me desplazo con
las flechas del teclado y selecciono Manual
Ahora seleccionaré las dos primeras, router y vuex y
deseleccionaré listener. Para desplazarnos lo hacemos con las flechas y para
seleccionar o deseleccionar lo hacemos con la barra espaciadora.
una vez todo seleccionado hacemos enter, en la siguiente
paantalla seleccionaremos la versión, en nuestro caso 3.X:
Diremos no al modo histórico para router
Dejaremos In dedicated config files:
Y elegiremos NO como preset para futuros proyectos
Con estos ajustes vue nos creará el proyecto en nuestra
carpeta:
Una vez creado el proyecto, nos indica que nos movamos al
proyecto con cd counter-vuex
y que ejecutemos el servidor con
npm run serve
Si lo hacemos se nos lanzará el servidor de desarrollo,
veremos el enlace al servidor local en el puerto 8080. Como podemos ver en el
navegador de VScode ya tenemos todas las dependencias instaladas en nuestro
proyecto:
4 Organizando y limpiando nuestro proyecto
Simiramos la estructura delproyecto, en la carpeta raíz src, veremos que
tenemos in archivo App.vue, este es el componente padre de la aplicación,
podemos ver como en la carpeta views (vistas) tenemos dos archivos About.vue y
Home.vue. estos son los componentes hijos de App y se renderizarán en App, por
último tenenmos la carpeta components que contiene el archivo HelloWorld, este
es un componente hijo de Home.vue reutilizable que está siendo llamado desde el
Home.vue. Suena un poco lioso pero es muy sencillo, veamos una imagen de esta
estructura:
En
App.vue es donde se renderizarán todos las vistas y compoentes de estas vistas,
esto es así porque así queda declarado en el archivo main.js archivo JavaScript
principal de la app, en este archivo también le indicamos a vue debe usar el
enrutador (router) para gestionar nuestras rutas dentro de la App, esto lo
veremos en su momento:
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
Una
vez creada con el ciclo de vida mount nuestra App, es allí donde añadimos
dentro de un template lavista de router <router /> que le dice a vue
donde debe renderizarse absolutamente todo, y comopuedes ver también hay un par
de router links , uno nos lleva a Home y el otro a una vista que se lama about
Código
completo de la App.vue por defecto
<div id="nav">
<router-link to="/">Home</router-link> |
</div>
<router-view/>
</template>
<style lang="scss">
#app {
#nav {
a {
&.router-link-exact-active {
}
}
</style>
Veamos
que contiene Home.vue
Como
puedes ver, en un template tenemos una div con la clase hom que contiene una
imagen y una llamada a un compoente que se llama “HelloWorld” (en azul).
Este
componente HelloWorld está en la carpeta component, y para poder ser llamado
desde esta vista home hay que impotarlo desde la lógica de home (en violeta)
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
}
}
</script>
Es
decir Home.vue llama a Helloworld y los dos se renderizan en App.vue que es
donde tenenmos el
<router-view/>
Todo
esto es posible gracias al router, si vamos a la carpeta router veremos un
archivo llamado index.js,en el que se le indica a >Vue donde está cada cosa,
para poder declarar una ruta a una vista, debemos primero importar esa vista
desde la carpeta views y luego decidimos su ruta y el nombre de su url (en
azul)
Luego
exportamos las rutas (en verde)
import Home from '../views/Home.vue'
const routes = [
path: '/',
},
{
path: '/about',
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
]
const router = createRouter({
})
export default router
el resto de código lo veremos más
adelante, de momento no te preocupes de nada mas, ahora como no queremos ni el
compoente Helloworld ni la vista about, por que no las vamos a usar, podemos
eliminarlas y eliminarlas de home y de router:
Ahora mismo la plantilla por
defecto nos muestra esto:
Vamos a quitar el componente
helloworld.vue en la vista Home.vue a ver que pasa, vamos a Home y borramos la
importación, la declaración y la llmada (todo en azul)
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
}
}
</script>
Lo dejamos así:
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
Al borrar el componente
HelloWorld de la vista Home ya solo vemos la imagen y los links:
Por tanto podemos ir a la carpeta
components y eliminar el archivo HelloWorld.
Eliminemos ahora la vista About, podemos ir a la carpeta views y simplemente borrarla, pero si hacemos eso senos mostrará un mensaje de error:
import Home from '../views/Home.vue'
const routes = [
path: '/',
},
{
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
]
const router = createRouter({
})
export default router
Par que todo vuelva afuncionar
bastará con eliminar esa importción y esa ruta, si lo hacemos, volveremos a ver
nuestro home, renderizandose en app.vue, solo que el enlace a About, ya no
funciona porque about.vue ya no existe
Vamos a borrar los enlaces
también iremos a App.vue y los borramos, es una div con clse nav que está
dentro del template:
<div id="nav">
<router-link to="/">Home</router-link> |
</div>
<router-view/>
</template>
Si los borramos, solo nos queda la magen del logo de Vue:
Pero la imagen es muy fácil de
borrar también está en Home.ve:
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
Si la eliminamos nos queda un
Home.vue limpio renderizandose en App.vue, es decir nuestra plantilla limpia
para empezar nuestra propia App,para que no se vea solo una pantalla en blanco
podremos un mensaje de hola mundo:
<div class="home">
<p>Hola mundo X)</p>
</div>
</template>
<script>
export default {
}
</script>
Y como puedes ver:
