Jak tworzysz stronę na Vue?

Stronę Vue zwykle tworzy się jako oddzielny komponent (.vue), który składa się z trzech sekcji: <template>, <script> i <style>.

1. <template>: Definiuje strukturę HTML strony, korzystając z składni szablonów Vue do wiązania danych i logiki.

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

2. <script>: Zawiera logikę JavaScript strony, w tym definicję danych (data), właściwości obliczanych (computed), metod (methods), haków cyklu życia i innych opcji komponentu.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Moja strona Vue',
         pageContent: 'To jest zawartość mojej pierwszej strony Vue.'
       };
     },
     mounted() {
       // Logika wykonywana po zamontowaniu komponentu
       console.log('Strona zamontowana!');
     }
   }
   </script>
   

3. <style>: Zawiera style CSS stosowane do komponentu. Można użyć modyfikatora scoped, aby ograniczyć zakres stylów tylko do tego komponentu.

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

Utworzony komponent następnie importuje się do pliku routingu (np. za pomocą vue-router) i łączy z określonym adresem URL, co pozwala na wyświetlenie tej strony po przejściu do tego adresu.

// router/index.js (przykład z vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Import komponentu strony

const routes = [
  {
    path: '/moj-adres', // URL strony
    name: 'MyPage',
    component: MyPage // Komponent do wyświetlenia
  }
];

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

export default router;

W głównym pliku aplikacji (main.js) router jest podłączany do instancji Vue.

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

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

Podsumowując, tworzenie strony Vue polega na stworzeniu komponentu opisującego jej strukturę, logikę i style, oraz skonfigurowaniu routera do wyświetlania tego komponentu pod określonym URL.