Πώς δημιουργείτε μια σελίδα στο Vue;

Η σελίδα Vue δημιουργείται συνήθως ως ξεχωριστό συστατικό (.vue αρχείο), που αποτελείται από τρεις ενότητες: <template>, <script> και <style>.

<template>: Ορίζει τη δομή HTML της σελίδας, χρησιμοποιώντας τη σύνταξη προτύπων Vue για δέσιμο δεδομένων και λογικής.
```
<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <p>{{ pageContent }}</p>
  </div>
</template>
```

<script>: Περιέχει τη λογική JavaScript της σελίδας, συμπεριλαμβανομένου του ορισμού δεδομένων (data), υπολογιζόμενων ιδιοτήτων (computed), μεθόδων (methods), hooks κύκλου ζωής και άλλων επιλογών του συστατικού.

<script>
export default {
  data() {
    return {
      pageTitle: 'Η σελίδα μου Vue',
      pageContent: 'Αυτό είναι το περιεχόμενο της πρώτης μου σελίδας Vue.'
    };
  },
  mounted() {
    // Λογική που εκτελείται μετά το τοποθέτηση του συστατικού
    console.log('Η σελίδα τοποθετήθηκε!');
  }
}
</script>

<style>: Περιέχει στυλ CSS που εφαρμόζονται στο συστατικό. Μπορεί να χρησιμοποιηθεί ο τροποποιητής scoped για να περιορίσει το πεδίο εφαρμογής των στυλ μόνο σε αυτό το συστατικό.
```
<style scoped>
h1 {
  color: blue;
}

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

Το δημιουργημένο συστατικό εισάγεται στη διαδρομολόγηση αρχείου (π.χ., με vue-router) και συνδέεται με μια συγκεκριμένη διεύθυνση URL, ώστε να εμφανίζεται αυτή η σελίδα κατά την πλοήγηση σε αυτήν.

// router/index.js (παράδειγμα με vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Εισαγωγή του συστατικού σελίδας

const routes = [
  {
    path: '/my-page', // URL σελίδας
    name: 'MyPage',
    component: MyPage // Το συστατικό που θα εμφανίζεται
  }
];

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

export default router;

Στο κύριο αρχείο της εφαρμογής (main.js), ο router συνδέεται με το Vue instance.

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

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

Εν κατακλείδι, η δημιουργία μιας σελίδας Vue αποτελεί τη δημιουργία ενός συστατικού που περιγράφει τη δομή, τη λογική και το στυλ της, και τη ρύθμιση του router για την εμφάνιση αυτού του συστατικού σε μια συγκεκριμένη διεύθυνση URL.