Como cria uma página no Vue?

Uma página Vue é geralmente criada como um componente separado (.vue), que consiste em três secções: <template>, <script> e <style>.

1. <template>: Define a estrutura HTML da página, usando a sintaxe de templates do Vue para ligar dados e lógica.

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

2. <script>: Contém a lógica JavaScript da página, incluindo a definição de dados (data), propriedades computadas (computed), métodos (methods), hooks do ciclo de vida e outras opções do componente.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Minha página Vue',
         pageContent: 'Este é o conteúdo da minha primeira página Vue.'
       };
     },
     mounted() {
       // Lógica executada após montar o componente
       console.log('Página montada!');
     }
   }
   </script>
   

3. <style>: Contém estilos CSS aplicados ao componente. Pode usar o modificador scoped para limitar o escopo dos estilos a este componente.

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

O componente criado é então importado no arquivo de roteamento (por exemplo, usando vue-router) e ligado a uma URL específica, permitindo mostrar esta página ao navegar até essa direção.

// router/index.js (exemplo com vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Importa o componente da página

const routes = [
  {
    path: '/my-page', // URL da página
    name: 'MyPage',
    component: MyPage // Componente que será exibido
  }
];

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

export default router;

No arquivo principal da aplicação (main.js), o roteador é conectado à instância do Vue.

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

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

Assim, criar uma página Vue consiste em criar um componente que descreve sua estrutura, lógica e estilos, e configurar o roteador para exibir esse componente em uma URL específica.