Come si crea una pagina su Vue?

Una pagina Vue viene solitamente creata come un componente separato (.vue), che consiste di tre sezioni: <template>, <script> e <style>.

<template>: Definisce la struttura HTML della pagina, utilizzando la sintassi dei template Vue per legare dati e logica.
```
<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <p>{{ pageContent }}</p>
  </div>
</template>
```

<script>: Contiene la logica JavaScript della pagina, inclusa la definizione di dati (data), proprietà calcolate (computed), metodi (methods), hook del ciclo di vita e altre opzioni del componente.

<script>
export default {
  data() {
    return {
      pageTitle: 'La mia pagina Vue',
      pageContent: 'Questo è il contenuto della mia prima pagina Vue.'
    };
  },
  mounted() {
    // Logica eseguita dopo il montaggio del componente
    console.log('Pagina montata!');
  }
}
</script>

<style>: Contiene gli stili CSS applicati al componente. È possibile usare il modificatore scoped per limitare l'ambito degli stili a questo componente.
```
<style scoped>
h1 {
  color: blue;
}

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

Il componente creato viene poi importato nel file di routing (ad esempio, usando vue-router) e associato a un URL specifico, permettendo di mostrare questa pagina navigando a quell'indirizzo.

// router/index.js (esempio con vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Import del componente della pagina

const routes = [
  {
    path: '/my-page', // URL della pagina
    name: 'MyPage',
    component: MyPage // Componente che verrà mostrato
  }
];

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

export default router;

Nel file principale dell'applicazione (main.js), il router viene collegato all'istanza Vue.

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

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

In breve, creare una pagina Vue consiste nel creare un componente che descrive la sua struttura, logica e stile, e configurare il router per mostrare questo componente a un URL specifico.