Kā jūs izveidojat lapu Vue?

Lapas Vue parasti tiek izveido kā atsevišķu komponentu (.vue failu), kas sastāv no trim sekcijām: <template>, <script> un <style>.

1. <template>: Definē lapas HTML struktūru, izmantojot Vue šablonus datu sasaistīšanai un loģikai.

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

2. <script>: Satur lapas JavaScript loģiku, tostarp datu definīciju (data), aprēķinātās īpašības (computed), metodes (methods), dzīves cikla hokus un citas opcijas.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Mana Vue lapa',
         pageContent: 'Šis ir mana pirmā Vue lapas saturs.'
       };
     },
     mounted() {
       // Loģika, kas izpildās pēc komponenta montēšanas
       console.log('Lapa ir montēta!');
     }
   }
   </script>
   

3. <style>: Satur CSS stilus, kas tiek piemēroti komponentam. Var izmantot scoped modifikatoru, lai stili būtu spēkā tikai šim komponentam.

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

Izveidoto komponentu pēc tam importē maršrutēšanas failā (piemēram, ar vue-router), un sasaista ar noteiktu URL, ļaujot šajā adresē parādīt šo lapu.

// router/index.js (piemērs ar vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Lapaspuses komponenta imports

const routes = [
  {
    path: '/my-page', // Lapaspuses URL adrese
    name: 'MyPage',
    component: MyPage // Komponents, kas tiks rādīts
  }
];

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

export default router;

Galvenajā lietojuma failā (main.js) maršrutētājs tiek pievienots Vue lietojumprogrammas instancē.

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

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

Tādējādi Vue lapas izveide ietver tās struktūras, loģikas un stilu aprakstīšanu komponentā, un pēc tam maršrutētāja konfigurēšanu, lai šis komponents tiktu rādīts noteiktā URL.