Vue-де баракча кантип түзөсүз?

Vueда баракча адатта админ компонент катары (.vue файл) түзүлөт, ал үч бөлүктөн турат: <template>, <script> жана <style>.

1. <template>: HTML структурасын аныктайт, Vue шаблондорун колдонуп маалыматтарды байланыштыруу жана логика үчүн.

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

2. <script>: Барактын JavaScript логикасын камтыйт, анын ичинде маалыматтарды аныктоо (data), эсептелген мүнөздөмөлөр (computed), ыкмалары (methods), жашоо циклинин хукулары жана башка опциялар.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Менин Vue барагым',
         pageContent: 'Бул менин биринчи Vue барагымдын мазмуну.'
       };
     },
     mounted() {
       // Компонент орнотулгандан кийин ишке ашкан логика
       console.log('Барак орнотулду!');
     }
   }
   </script>
   

3. <style>: CSS стили камтыйт, ал компонентке колдонулат. scoped модификатору стилинин чөйрөсүн гана ушул компонентке чектөө үчүн колдонулушу мүмкүн.

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

Жасалган компонент андан соң маршрутизация файлына импорттолуп, белгилүү бир 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) маршрутизаторду Vue колдонмо үлгүсүнө кошот.

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

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

Ошентип, Vueда баракча түзүү — анын түзүмүн, логикасын жана стилин сүрөттөгөн компонент түзүү жана кийин маршрутизаторду конфигурациялоо аркылуу бул компонентти белгилүү URL боюнча көрсөтүү.