Vue: nima uchun, qanday va sozlash

Nima uchun?

Oldingi sahifada Vue-dagi shablonlar (templates) va komponentlar haqida ko‘rganimizdek, endi ishlashning boshqa usullariga ehtiyoj bor, chunki biz quyidagilarni xohlaymiz:

• kattaroq loyihalarga ega
• Vue bilan bog‘liq barcha kodlarni bir joyda to‘plang
• Vue-da komponentlardan foydalaning (biz bunga tez orada kelamiz)
• muharrirda ta’kidlash va avtomatik to‘ldirishni qo‘llab-quvvatlashga ega
• brauzerni avtomatik yangilash

Va bularning barchasini amalga oshirish uchun biz *.vue fayllariga o‘tishimiz kerak.

Qanaqasiga?

SFC (Yagona fayl komponentlari) yoki *.vue fayllari bilan ishlash osonroq, lekin ular bevosita brauzerda ishlay olmaydi, shuning uchun brauzer Vue ilovamizni ishga tushirishi uchun *.vue fayllarimizni *.html, *.css va *.js fayllariga kompilyatsiya qilish uchun kompyuterimizni sozlashimiz kerak.

Veb-sahifamizni SFC-lar asosida yaratish uchun biz Vite deb nomlangan dasturni yaratish vositasi sifatida foydalanamiz va kodimizni Vue 3 til xususiyatlari uchun Volar kengaytmasi bilan VS Code muharririga yozamiz.

Sozlash; o‘rnatish

Vue SFC ilovalarini kompyuteringizda ishga tushirish uchun kerak bo‘lgan narsalarni o‘rnatish uchun quyidagi uchta bosqichni bajaring.

1. “VS Code” muharriri

   Vue loyihalari uchun ishlatilishi mumkin bo‘lgan juda ko‘p turli xil muharrirlar mavjud. Biz VS Code muharriridan foydalanamiz. VS kodini yuklab oling va o‘rnating.

   

   ---

2. VS kodi "Volar" kengaytmasi

   Tahrirlovchida *.vue fayllari bilan ajratib ko‘rsatish va avtomatik to‘ldirish uchun VS kodini oching, chap tomondagi "Kengaytmalar" ga o‘ting. "Volar" ni qidiring va eng ko‘p yuklangan kengaytmani va "Vue 3 uchun tilni qo‘llab-quvvatlash" tavsifini o‘rnating.

   

   ---

3. Node.js

   Node.js-ning so‘nggi versiyasini yuklab oling va o‘rnating, chunki Vue qurish vositasi "Vite" buning ustiga ishlaydi.

   Node.js ochiq manbali server tomonidagi JavaScript ish vaqti muhitidir.

   

   ---

Standart misol loyihasini yarating

Kompyuteringizda standart Vue misol loyihasini yaratish uchun quyidagi amallarni bajaring.

4. Kompyuteringizda Vue loyihalaringiz uchun papka yarating.

   ---

   ---

5. VS Code-da menyudan Terminal -> New Terminal ni tanlab terminalni oching:

   

   ---

6. cd <folder-name> , cd .. , ls (Mac/Linux) va dir (Windows) kabi buyruqlar yordamida hozirgina yaratilgan Vue jildiga o‘tish uchun terminaldan foydalaning. Agar siz terminalda buyruqlar yozishni yaxshi bilmasangiz, Buyruqlar qatori interfeysi (CLI) ga bu yerda kirishimizga qarang.

   ---

7. Terminaldagi Vue jildingizga o‘tganingizdan so‘ng, quyidagilarni yozing:

   npm init vue@latest

   ---

8. Birinchi loyihangizni "firstsfc" nomi bilan yarating:

   

   ---

9. Barcha variantlarga "Yo‘q" deb javob bering:

   

   ---

10. Endi siz terminalda buni taqdim etishingiz kerak:

    

    ---

11. Endi biz yuqorida tavsiya etilgan buyruqlarni bajaramiz.

    Katalogni "firstsfc" jildidagi yangi loyihangizga o‘zgartirish uchun ushbu buyruqni bajaring:

    cd firstsfc

    ---

12. Vue loyihasi ishlashi uchun barcha kerakli bog‘liqliklarni o‘rnating:

    npm install

    ---

13. Rivojlanish serverini ishga tushiring:

    npm run dev

    ---

14. Endi terminal oynasi quyidagicha ko‘rinishi kerak:

    

    Va sizning brauzeringiz namunaviy loyihani avtomatik ravishda ochishi kerak:

    

    Agar siz brauzerda loyiha namunasini topa olmasangiz, terminaldagi havoladan foydalaning. Terminal oynasida topilgan havola yuqoridagi skrinshotdagi manzildan boshqa manzilga ega bo‘lishi mumkin.

    Endi misol loyihasi kompyuteringizda Vite qurish vositasi tomonidan ishlab natija rejimida ishlamoqda.

Loyiha fayllari

Avtomatik ravishda yaratilgan namunaviy loyiha ko‘plab fayllarni o‘z ichiga oladi va biz ulardan bir nechtasini tezda ko‘rib chiqamiz.

main.js

VS Code muharririda Vue loyihangizga o‘ting, "src" papkasida "main.js" faylini toping:

"main.js" Vite-ga "App.vue" fayli asosida Vue loyihasini qanday yaratishni aytadi. Bu brauzerga Vue kodimizni qanday ishga tushirishni va Vue misolini <div id="app"> tegiga qanday o‘rnatganimizni aytib berish uchun avval skript yorlig‘i bilan CDN havolasini berganimizga o‘xshaydi.

App.vue

Xuddi shu misol loyiha papkasida "App.vue" faylini toping va uni oching. Boshqa barcha *.vue fayllari singari, "App.vue" ham uchta qismdan iborat: <script> qismi, <template> qismi va <style> qismi.

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

"App.vue" ning skript qismida ko‘rib turganingizdek, boshqa *.vue fayllari nazarda tutilgan: ular "komponentlar" va "komponentlar" jildida joylashgan. Agar siz "App.vue" faylining "shablon (template)" qismini ko‘rib chiqsangiz, oddiy HTML teglari bo‘lmagan teglarni ko‘rishingiz mumkin: <HelloWorld> va <TheWelcome> . Komponentlar shunday nomlanadi. Komponentlar ilova ichidagi ilovalarga o‘xshaydi. Tez orada komponentlar haqida ko‘proq bilib olamiz.

 is responsible for telling the compiler 
which files the Vue project consists of.