﷽
Assalamu alaykum!
Vue.js loyihasi Vite orqali yaratilganda, loyihaning tuzilmasi quyidagicha bo’ladi. Har bir katalog va faylning maqsadi va vazifalari haqida batafsil tanishamiz.
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
Loyihaning asosi
node_modules/
Bu katalogda loyihamizni barcha bog’liq package va modullari saqlanadi. npm install buyruği bajarilganda, barcha kerakli paketlar shu katalogga yuklanadi.
public/
Bu katalog loyihamizni umumiy statik fayllarini saqlaydi. Bu katalogdagi fayllar ilova tuzilayotganda o’zgartirilmasdan oxirgi tuzilmaga ko’chiriladi. Misol uchun, vite.svg fayli.
src/
Loyihamizning asosiy manba kodi shu katalogda joylashgan. Barcha komponentlar, stillar , rasmlar va boshqa resurslar shu yerda saqlanadi.
src/assets/
Bu katalogda loyihamizning rasmlari, shriftlar, va boshqa statik resurslari saqlanadi. Misol uchun, vue.svg fayli.
src/components/
Bu katalogda Vue komponentlari saqlanadi. Har bir komponent alohida .vue faylida saqlanadi. Misol uchun, HelloWorld.vue.
src/App.vue
Bu asosiy Vue komponentidir. Bu komponent ilovangizning asosiy tuzilishini va boshqa komponentlarni o’z ichiga oluvchi hisoblanadi.
src/main.js
Bu fayl ilovamzini ishga tushishi uchun kirish nuqtasi hisoblanadi. Bu faylda Vue ilovasi yaratiladi va asosiy komponent (App.vue) ni o’z ichida HTML faylga renderlaydi , bundan tashqar ba’zi css fayllarimizni global holatda ulashimiz mumkin bo’laadi.
import { createApp } from 'vue'
// import "./style.css" (misol)
import App from './App.vue'
createApp(App).mount('#app')
.gitignore
Bu faylda Git uchun qaysi fayl va kataloglarni versiya boshqaruviga qo’shmaslik kerakligini belgilab qo’yiladi. Misol uchun, node_modules va dist kataloglari.
index.html
Bu ilovamizga kirish uchun asosiy bo’lgan HTML fayl hisoblanadi. Bunda ilovangizni qayerda yuklash kerakligi belgilanadi.
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
</span>Vite + Vue<span class="nt">
id="app">