¿Cómo crea una página en Vue?

Una página en Vue generalmente se crea como un componente separado (.vue), que consta de tres secciones: <template>, <script> y <style>.

1. <template>: Define la estructura HTML de la página, utilizando la sintaxis de plantillas de Vue para enlazar datos y lógica.

   <template>
     <div>
       <h1>{{ pageTitle }}</h1>
       <p>{{ pageContent }}</p>
     </div>
   </template>
   

2. <script>: Contiene la lógica JavaScript de la página, incluyendo la definición de datos (data), propiedades computadas (computed), métodos (methods), hooks del ciclo de vida y otras opciones del componente.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Mi página Vue',
         pageContent: 'Este es el contenido de mi primera página Vue.'
       };
     },
     mounted() {
       // Lógica que se ejecuta después de montar el componente
       console.log('¡Página montada!');
     }
   }
   </script>
   

3. <style>: Contiene estilos CSS que se aplican al componente. Se puede usar el modificador scoped para limitar el alcance de los estilos solo a este componente.

   <style scoped>
   h1 {
     color: blue;
   }
   
   p {
     font-size: 16px;
   }
   </style>
   

El componente creado luego se importa en el archivo de enrutamiento (por ejemplo, usando vue-router) y se vincula a una URL específica, lo que permite mostrar esta página al navegar a esa dirección.

// router/index.js (ejemplo con vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Importa el componente de la página

const routes = [
  {
    path: '/my-page', // URL de la página
    name: 'MyPage',
    component: MyPage // Componente que se mostrará
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

En el archivo principal de la aplicación (main.js), el enrutador se conecta a la instancia de Vue.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

De esta forma, crear una página en Vue consiste en crear un componente que describa su estructura, lógica y estilos, y configurar el enrutador para mostrar ese componente en una URL específica.