Vite orqali Vue loyiha qurish.

** Demak Vite texnologiyasi yordamidan Vue loyiha qurishni o'rganamiz!

Vite — Vue.js ilovasini yaratish uchun tez va samarali texnologiya hisoblanadi. Quyida Vite yordamida Vue.js (app) yaratish jarayonini batafsil ko'rib chiqamiz.

1. Muhitni tayyorlash kerak (Preparation of the environment)
Birinchidan, kompyuteringizda Node.js o'rnatilganligiga ishonch hosil qiling. Node.js ni rasmiy saytidan yuklab olish mumkin.

2. Yangi Vue.js loyihasini yaratish:
a. Terminal yoki komanda qatori (Command Prompt) ni ochamiz
b. Loyihani yaratish uchun quyidagi buyruqni bajaring:

va

npm create vite@latest [loyiha_nomi]

Bu buyruq yangi Vite loyihasini my-app nomi bilan yaratadi va Vue.js shablonidan foydalanishni tanlaymiz.

va bu yerda JavaScriptni tanlaymiz (hozircha) keyinroq TypeScript yoki Nuxt uchun bemalol ishlab ketaveramiz o'rganish uchun JavaScriptdan boshlashimiz mumkin bo'ladi.

 cd my-app
  npm install
  npm run dev

yuqoridagi buyruq orqali biz kerakli "package" larni o'rnatib olib loyihamizni ishga tushurishimiz mukin bo'ladi.

npm run dev

Ushbu buyruqdan so'ng, terminalda mahalliy (local) server manzili ko'rsatiladi, odatda bu http://localhost:3000 yoki 5174 bo'ladi. Brauzeringizda ushbu manzilga o'tib, yangi Vue.js ilovamizni ko'rishimiz mumkin.

3. Loyiha Tuzilmasi
Loyiha yaratib, ochilganingizdan so'ng, loyiha tuzilmasi (strukturasi) quyidagicha bo'ladi:

my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── vue.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

Keyingi maqolada Vue.js loyihamizning tuzilmasi va fayllari , folderlarga, fayllarga qanday nom berish kerak .