DEV Community

Cover image for Vite orqali Vue loyiha qurish.
Mukhriddin Khodiev (work)
Mukhriddin Khodiev (work)

Posted on

Vite orqali Vue loyiha qurish.

Assalamu alaykum! 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:

Image description

va

npm create vite@latest [loyiha_nomi]
Enter fullscreen mode Exit fullscreen mode

Image description

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

Image description

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

Image description

 cd my-app
  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

Enter fullscreen mode Exit fullscreen mode

Image description

Keyingi maqolada Vue.js loyihamizning tuzilmasi va fayllari , folderlarga, fayllarga qanday nom berish kerak , inshaaAlloh bu haqida batafsil gaplashamiz!

BaarakAllohu fiikum!

https://t.me/mukhriddinweb
https://khodieff.uz

Top comments (0)