Kako pravite stranicu na Vue?

Stranicu na Vue obično kreirate kao poseban komponent (.vue fajl), koji se sastoji od tri sekcije: <template>, <script> i <style>.

1. <template>: Definiše HTML strukturu stranice koristeći Vue šablone za vezivanje podataka i logiku.

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

2. <script>: Sadrži JavaScript logiku stranice, uključujući definiciju podataka (data), računarskih svojstava (computed), metoda (methods), hook-ova životnog ciklusa i drugih opcija komponente.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Moja Vue stranica',
         pageContent: 'Ovo je sadržaj moje prve Vue stranice.'
       };
     },
     mounted() {
       // Logika koja se izvršava nakon montiranja komponente
       console.log('Stranica je montirana!');
     }
   }
   </script>
   

3. <style>: Sadrži CSS stilove koji se primenjuju na komponentu. Može se koristiti modifikator scoped da bi stilovi bili ograničeni samo na ovu komponentu.

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

Kreirana komponenta se zatim importuje u fajl za rutiranje (npr. koristeći vue-router) i povezuje sa određenom URL adresom, što omogućava da se pri prelasku na tu adresu prikaže ta stranica.

// router/index.js (primer sa vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Import komponente stranice

const routes = [
  {
    path: '/my-page', // URL adresa stranice
    name: 'MyPage',
    component: MyPage // Komponenta koja će biti prikazana
  }
];

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

export default router;

U glavnom fajlu aplikacije (main.js) rutiranje se povezuje sa instancom Vue aplikacije.

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

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

Dakle, kreiranje Vue stranice svodi se na pravljenje komponente koja opisuje njenu strukturu, logiku i stilove, i kasnije podešavanje rutera za prikaz te komponente na određenom URL-u.