Vue.js Loyihamizning tuzilmasi haqida.

mukhriddinweb

Mukhriddin Khodiev (work)

Posted on June 15, 2024

Vue.js Loyihamizning tuzilmasi haqida.

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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

.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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

package.json

Bu faylda loyihamizning meta ma'lumotlari, bog'liqliklar (dependencies), skriptlar va boshqa sozlamalar saqlanadi. Misol uchun:

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

README.md

Bu fayl loyihamiz haqida ma'lumot beruvchi hujjatdir. Bu yerda loyihangizni qanday o'rnatish va ishlatish bo'yicha ko'rsatmalar beriladi.

vite.config.js

Bu faylda Vite konfiguratsiyasi saqlanadi. Bu faylda tuzilma jarayonini o'zgartirish va kengaytirish mumkin.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})
Enter fullscreen mode Exit fullscreen mode

Qo'shimcha kataloglar va fayllar

1. src/store/

Agar ilovangizda Vuex yoki Pinia kabi davlat boshqaruv kutubxonalari foydalanilsa, bu katalogda global store boshqaruv fayllari saqlanadi.

2. src/router/

Agar ilovangizda Vue Router ishlatilsa, bu katalogda (sahifalar yo'llari , qoidalari ) saqlanadi.

3. src/styles/

Umumiy uslublar saqlanadigan katalog. Misol uchun, global CSS yoki SASS fayllar.

4. src/utils/

Umumiy yordamchi funksiyalar va boshqa umumiy kodlar uchun katalog.

Loyihani kengaytirish

Yuqoridagi tuzilma Vue.js ilovangizni boshlash uchun asosiy tuzilma (struktura) . Loyihamiz kattalashgani sayin, qo'shimcha kataloglar va fayllar qo'shishimiz mumkin. Modularizatsiya orqali kodni tashkil qilish, qayta foydalanish va boshqarish oson bo'ladi. Vue.js o'rganishda davom etamiz

💖 💪 🙅 🚩
mukhriddinweb
Mukhriddin Khodiev (work)

Posted on June 15, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related