🗂️File Structure

პროექტში აუცილებელია გვქონდეს სწორად განსაზღვრული ფაილური სტრუქტურა. თუ პროექტში მივყვებით გარკვეულ კონვენციებს ფაილური სტრუქტურის შესახებ ძალიან ბევრ ბენეფიტს ვიღებთ. როგორიცაა:

• დეველოპერების კოლაბორაციისა და ურთიერთობის სიმარტივე

• პროექტი ინტუიციურია უცხო დეველოპერისათვის

• მარტივდება დიდი ზომის პროექტების შესწავლა და მასში სიახლეების შეტანა

ფაილური სტრუქტურა root დირექტორია

მთავარ დირექტორიაში ძირითადად მოთავსებულია ავტომატურად დაგენერირებული ფოლდერები და ისეთი კონფიგურაციის ფაილები როგორიცაა. ორი ფაილი რისი ჩამაწებაც საჭიროა არის .env და .env.example. და ასევე ჩვენთვის ყველაზე მნიშვნელოვანი src ფოლდერი.

src დირექტორია

რეალურად src წარმოადგენს ინ დირექტორიას სადაც ჩვენ მიერ დაწერილი კოდი თავსდება. მომდევნო სექციებში ჩვენ განვიხილავთ თითოეული ფაილისა და ფოლდერის როლს ამ დირექტორიაში.

src
|--- assets
|--- components
|--- composables
|--- layouts
|--- locales
|--- plugins
|--- router
|--- store
|--- utils
|--- views (or pages)
- App.vue
- main.js

src/assets

ამ ფოლდერში მოთავსებულია ჩვენი css ფაილები, სურათები pdf ფაილები და ა.შ თვითონ მასში მოთავსებული ფაილების სტრუქტურა პირობითია, ერთადერთი წესი არის ის რომ იყოს ინტუიციური. ერთ-ერთ მაგალითად შეგიძლია მომდევნო სტრუქტურა გამოიყენო.

src/assets
|--- files    - ფაილები რომლებიც სურათები არ არის, მაგალითად pdf და ა.შ
|--- images   - სურათები. შიგნით შეგვიძლია კიდევ სასურველი 
                სტრუქტურით დავყოთ სურვილის შემთხვევაში
- base.css    - ავტომატურად დაგენერირებული css რომელსაც დიდად არ ვეხებით
- main.css    - გლობალური css  

src/components

აქ უნდა მოვათავსოთ კომპონენტები. მასში ასევე უნდა მვოათავსოთ რამოდენიმე ფოლდერი რომელიც თითქმის ყველა აპლიკაციაში დაგვჭირდება. ესენია : icons, layouts, shared, ui. ასევე გვაქვს მომდევნო წესი, ყოველი არსებული view (page) სათვის უნდა შევქმნათ შესაბამისი ფოლდერები, დავარქვათ შესაბამისი view (page)ის სახელი და მასში მოვათავსოთ ის კომპონენტები რომელიც მაგ გვერდზე გვჭირდება. კომპონენტის ფაილის სახელი შეიძლება იყოს როგორც PascalCase ასევე kebab-case ფაილების სახელის დარქმევისას გაითვალისწინე შესაბამისი Style Guide

src/components
|--- icons    - Icon-ები. დეტალური ინფორმაცია შესაბამის სექციაში.
|--- layouts  - layout-ები. src/layouts სექციაში მოყვანილი გამოყენების მაგალითი

|--- shared   - ისეთი კომპონენტები რომლებიც 2 ან მეტ გვერდზე გამოიყენება
|---|- - PageHeader.vue <-მაგალითI

|--- ui       - user interface ის კომპონენტები: ღილაკები, ინფუთები, card-ები და ა.შ.
|---|---buttons  <- მაგალითი
|---|---|- - DangerButton.vue <- მაგალითი

იმ შემთხვევაში თუ გვაქვს ContactView ან ContactPage აქვე გვექნება შესაბამისი contact 
ფოლდერი რომელშიც იქნება მოთავსებული შესაბამისი კომპონენტები. მაგალითად თუ მასში არის 
ფორმა და ინფორმაციის სექციები ჩვენს ფაილურ სტრუქტურას ექნება შემდეგი სახე  

|--- contact
|---|- - Form.vue
|---|- - Information.vue

src/composables

ჩვენი composable-ები რომლებიც გარკვეულ სთეითს გვიბრუნებს.

src/composables
|- - useMouseLocation.js
|- - useCounter.js
|- - ...

src/layouts

აქ თავსდება ჩვენი Layout ის მთავარი კომპონენტები

src/layouts
|- - DefaultLayout.vue
|- - AdminLayout.vue
|- - ...

იმისათვის რომ ამ კომპონენტების მოცულობა არ იყოს ძალიან დიდი ხდება მათი კომპონენტებად დაყოფა, და შესაბამისი კომპონენტები თავსთება src/components/layouts დირექტორიაში

მაგალითად, თუ გვაქვს src/layouts/AdminLayout.vue და მას აქვს header, footer და sidebar კომპონენტები. ფაილურ სტრუქტურას ექნება შემდეგი სახე

src/components/layouts
|--- admin
|---|- - Header.vue
|---|- - Footer.vue
|---|- - Sidebar.vue

src/layouts
|- - AdminLayout.vue

src/locales

ამ დირექტორიაზე მოთავსდება vue-i18n ის შესაბამისი თარგმნები. გამომდინარე იქედან რომ ვიყენებთ i18n ally ექსთენშენს ედიტორისათვის, ფაილებს ექნებათ სწორხაზოვანი მარტივი სტრუქტურა. დამატებითი ინფორმაციისთვის ნახე Localization (i18n) სტატია.

src/locales
|- - en.json
|- - ge.json (გამოიყენე ge და არა ka, რომ i18n ally-მ დროშაც გამოაჩინოს)
|- - jp.json

src/plugins

აქ მოთავსებული ჩვენი plugin-ები. მაგალითად i18n, vuetify და ა.შ. პლაგინებზე მეტი ინფორმაციისათვის შეგიძლია ნახო შესაბამისი plugins სექცია.

src/plugins
|--- i18n
|---|- - index.js
|--- vuetify
|---|- - index.js
|--- axios
|---|- - index.js

src/router

აქ მოთავსებული იქნება vue-router ის შესაბამისი კონფიგურაცია. აპლიკაციის სიდიდიდან გამომდინარე მის ფაილურ სტრუქტურას შესაძლოა სხვადასხვა სახე ჰქონდეს. შესაძლოა იყოს მხოლოდ index.js ფაილი ან დაყოფილი იყოს შემდეგი სახით:

src/router
|- - guards.js
|- - index.js
|- - middlwares.js

დამატებითი ინფორმაცია შეგიძლია ნახო router სექციაში.

src/store

აქ ვათავსებთ შესაბამისი ფინიას ან vuex ის სთორის შესაბამის ფაილებს. მაგალითში მოცემული იქნება მხოლოდ Pinia-ს რეკომენდირებული ფაილური სტრუქტურა, რადგან თუ ახალ პროექტს აკეთებ უდაოდ Pinia-ს გამოყენება სჯობს, ხოლო თუ ძველ პროექტზე მუშაობ უკვე იქნება გარკვეული ფაილური სტრუქტურა

Coming Soon..

src/utils

აქ ვათავსებთ წვრილან ლოგიკას რომელიც ან ბევრგან გვჭირდება ან სადაც გვჭირდება დიდად იმპლემენტაციის დეტალები არ გვაინტერესებს. composable-ისგან განსხვავდება იმით რომ არ გვაქვს არანაირი სთეითი. კარგი მაგალითI იქნება ფუნქცია რომელიც გვიბრუნებს თუ რამდენი წელი გავიდა კონკრეტული თარიღიდან.

File Structure

src/utils
|- - dateUtils.js

src/utils/dateUtils.js

export const yearsFrom = (year, month = 1, date = 1) => {
  const creation = new Date(year, month, date);
  return new Date().getFullYear() - creation.getFullYear();
};

src/views (ან pages)

ამ ფოლდერში შეგვიძლია დავარქვათ როგორც views ასევე pages. აქ ვათავსებთ უშუალოდ ჩვენი გვერდების შესაბამის კომპონენტებს, რომლებიც გამოიყენება vue-router ში შესაბამის როუტზე შესაბამისი გვერდის დასაბრუნებლად. ამ ფოლდერში მოთავსებული კომპონენტები უნდა მთავრდებოდეს შესაბამისად View ან Page სუფიქსით.

/src/views
|- - HomeView

ან 

/src/pages
|- - HomePage

თვითონ View/Page კომპონენტი უნდა იყოს დაყოფილი კომპონენტებად რომლებიც src/components/{შესაბამისი ვიუს ფოლდერის სახელი}/... ამ დირექტორიაზე იქნება მოთავსებული. ან თუ მოცემული კომპონენტი სხვა გვერდზეც გამოიყენება მაგ შემთხვევაში shared დირექტორიაზე. მაგალითად:

example 1 - Landing Page

<template>
  <div>
    <home-carousel />
    <home-services />
    <home-information class="bg-gray-100" />
    <home-new-products />
    <home-locations class="bg-gray-100" />
  </div>
</template>

example 2 - About Page

<template>
  <div>
    <shared-page-header :text="$t('texts.about_company')" />

    <shared-cards-description
      :title="About Company"
      :description="some-description-text"
    />

    <div class="bg-gray-25 pt-5">
      <h2 class="mt-20 text-center text-4xl font-bold text-dark-green">
        Our Team
      </h2>

      <shared-employees
        :title="Founders"
        :employees="[
          {
            fullName: 'founder name 1',
            phone: '555 12 34 56'
          },
          {
            fullName: 'founder name 2',
            phone: '555 12 34 56',
          }
        ]"
      />

      <shared-employees
        :title="Managers"
        :employees="[
          {
            fullName: 'manager name 1',
            phone: '555 12 34 56',
          },
          {
            fullName: 'manager name 2',
            phone: '555 12 34 56',
          },
          {
            fullName: 'manager name 3',
            phone: '555 12 34 56',
          },
        ]"
      />
    </div>
  </div>
</template>

src/App.vue

აქ, არაფერი განსაკუთრებული არ ხდება

src/main.js

ამ ფაილში ხდება ძირითადი აპლიკაციის გამართვა, სტილების დაიმპორტება, პლაგინების დაიმპორტება და ვიუს აპლიკაციაში გამართვა, და აპლიკაციის დამაუნთება. მაგალითად:

import { createApp } from "vue";
import App from "@/App.vue";

import router from "@/router"; // vue-router
import i18n from "@/plugins/i18n"; // plugins
import vuetify from "@/plugins/vuetify"; //plugins

import "@/assets/main.css"; //styles
import "bpg-nino-elite-caps"; // font

const app = createApp(App);

app.use(router);
app.use(i18n);
app.use(vuetify);

app.mount("#app");