Ako vytvárate stránku vo Vue?

Stranico na Vue običajno ustvarite kot ločeno komponento (.vue datoteko), ki sestavlja tri sekcije: <template>, <script> in <style>.

<template>: Določa HTML strukturo strani z uporabo Vue predlog za vezavo podatkov in logiko.

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

<script>: Vsebuje JavaScript logiko strani, vključno z definicijo podatkov (data), izračunanih lastnosti (computed), metod (methods), življenjskimi cikli in drugimi možnostmi komponente.

<script>
export default {
  data() {
    return {
      pageTitle: 'Moja Vue stran',
      pageContent: 'To je vsebina moje prve Vue strani.'
    };
  },
  mounted() {
    // Logika, ki se izvede po montaži komponente
    console.log('Stran je montirana!');
  }
}
</script>

<style>: Vsebuje CSS stile, ki se uporabljajo za komponento. Modifikator scoped lahko omeji področje stilov samo na to komponento.
```
<style scoped>
h1 {
  color: blue;
}

p {
  font-size: 16px;
}
</style>
```

Ustvarjena komponenta se nato uvozi v datoteko za usmerjanje (npr. z uporabo vue-router) in poveže z določeno URL-jem, kar omogoča, da se ob prehodu na ta naslov prikaže ta stran.

// router/index.js (primer z vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Uvoz komponente strani

const routes = [
  {
    path: '/my-page', // URL naslov strani
    name: 'MyPage',
    component: MyPage // Komponenta, ki bo prikazana
  }
];

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

export default router;

V glavnem datoteki aplikacije (main.js) se router poveže z instanco Vue aplikacije.

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

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

Tako je ustvarjanje strani na Vue v bistvu ustvarjanje komponente, ki opisuje njeno strukturo, logiko in stile, ter kasnejša nastavitev routerja za prikaz te komponente na določenem URL-ju.