Project structure

Platonga xush kelibsiz! Ushbu qo'llanma sizga project structure'ni tushunishga va tezda ishga tushirishga yordam beradi.

Mundarija

• Project Overview
• Included Projects
  • Core
  • Shared
  • Remotes
  • Starter
• Next Steps

Project Overview

Platon Vue bilan qurilgan modular low-code platforma. Platforma bir-biri bilan bog'langan bir nechta project'lardan iborat bo'lib, ular birgalikda kuchli development experience ta'minlaydi.

Platform Architecture

Platon modular architecture'ga amal qiladi, bu yerda har bir project o'zining o'ziga xos rolini bajaradi. Ushbu project'larni tushunish platformada samarali harakat qilish va hissa qo'shishga yordam beradi.

Included Projects

Platon bir nechta project'lardan iborat. Asosiy project'lar Core va Shared. Keling, ularning har birini ko'rib chiqamiz:

Core

Core project Platon platformasining yurak qismi. U quyidagilarni bajaradigan markaziy hub vazifasini bajaradi:

• Turli module'lardan barcha configuration'larni to'playdi
• Remote project'lar va ularning connection'larini boshqaradi
• Hamma narsani bitta unified application'ga birlashtiradi
• Platforma uchun asosiy entry point ta'minlaydi

Key Responsibilities:

• Configuration management
• Remote module orchestration
• Application bootstrapping
• Core routing va navigation

---

Shared

Shared project butun platforma bo'ylab ishlatiladigan reusable resource'larni o'z ichiga oladi:

• Components - Reusable Vue component'lar
• Utils - Utility function'lar va helper'lar
• Composables - Vue composition API composable'lar
• Helpers - Umumiy vazifalar uchun helper function'lar
• Constants - Shared constant'lar va configuration'lar

Shared imkoniyatlaridan to'liq foydalanish uchun webpack.config.js faylidagi ModuleFederationPlugin quyidagicha sozlang.

  const { ModuleFederationPlugin } = require("webpack").container;
  new ModuleFederationPlugin({ 
        ...
      remotes: {
        shared: `shared@http://localhost:8083/remoteEntry.js`
      }, 
    })

sharedApp.js faylini quyidagicha yarating

const PlatonSharedApp = await import("shared/PlatonSharedApp") 
export const {
  // Components
	NotFound,
	PModal,
	PlatonChart,
	PlatonMapChart,
	Notification,
	NotificationContainer,
	PageLoadingView,
  EIMZOSign,
  RsImzoSign,
  IconPickerDialog,
  MapViewer,
  MapMarkerPicker,
	LangPicker,

  // Utils
	MapTiles,
  translations,
  themeChange,
  SharedStore,
  SharedStyles,
  SharedMixins,
  SharedDirectives,
  CreateHttpClient,
  VueLeafletImport,
  CodeMirrorImports,
  langLa,
  DrawingToolbarUz,
  PlatonModule
} = PlatonSharedApp

export default PlatonSharedApp.default

main.js ichida shared ni sozlang

  import PlatonSharedApp, {SharedStore} from "./sharedApp.js" 
  Vue.use(PlatonSharedApp, { 
    components: ["LangPicker", ...], 
    $api: { baseURL: API_ENDPOINT, store: SharedStore },
    ...
    })

components ichiga istalgan component nomini yozing va u global Vue componentlar qatoriga qo'shiladi.

Asosiy afzalliklari:

• Module'lar bo'ylab kod reusability
• Consistent UI/UX pattern'lar
• Shared business logic
• Centralized utility'lar

---

Remotes

Remotes folder barcha remote project'lar uchun container. Bu o'zi project emas, balki remote module'larni tashkil qiladigan directory.

Structure:

remotes/
├── moduleName1/
├── moduleName2/
└── moduleName3/

Usage Pattern: Barcha remote module'lar platforma bo'ylab remotes/moduleName sifatida murojaat qilinadi. Har bir remote module mustaqil project bo'lib, alohida develop qilinishi va deploy qilinishi mumkin.

Key Characteristics:

• Independent development va deployment
• Module federation support
• Lazy loading imkoniyatlari
• Isolated codebase'lar

---

Starter

Starter bu platon remote modul yozish uchun boshlang'ich loyiha sifatida xizmat qiladi. Starter modulini Platon Starter sahifasi orqali yuklab olish va yangi modul uchun sozlash kerak bo'ladi.

Starter quyidagicha faylar va papkalardan iborat bo'ladi huddi yangi lekin kerakli plaginlar o'rnatilgan va sozlangan holda.

.
├─ src
│  ├─router
│  ├─utils
│  ├─views
│  ├─App.vue
│  ├─bootstrap.js
│  ├─main.js
│  └─sharedApp.js
├─ .env 
├─ package.json 
├─ ...
└─ webpack.config.js.json

Eslatma

Starter bilan yangi modul yozish uchun Platon Shared moduli haqida to'liq ma'lumotga ega bo'lish kerak. Starter modulidagi barcha pluginlar to'liq Platon Shared moduliga tayanadi.

Starter Shared config

Starter uchun shared moduli avvaldan sozlangan bo'ladi agar sozlanmagan bo'lsa quyidagicha sozlang. Agar sizda shared moduli sozlangan bo'lsa sharedUrl o'rniga shared moduli linkini joylashtiring. Masalan: http://localhost:8080/

...
 plugins: [ 
    new ModuleFederationPlugin({ 
      ...,
      remotes: {
        shared: `shared@${sharedUrl}remoteEntry.js`
      },
      shared: {
        vue: {
          singleton: true,
          eager: true,
          requiredVersion: "^2.7.16"
        }
      }
    })
  ]

Starter ichiga Shared moduli to'g'ri sozlangan bo'lsa Shared moduli ichidagi barcha component va utillar starter ichida ishlaydi.

Eslatma

Starter moduli uchun Platon Shared to'g'ri sozlanmasa starter moduli ishlamaydi. Starter modulini Platon Sharedsiz ishlatish imkonsiz.

Starter Router

Starter router strukturasi ikkita index.js va routes.js fayldan iborat bo'ladi. index.js bu starterni o'zida ishlash uchun routerlar yoziladi huddi Vue proekt kabi. routes.js bu Host uchun maxsus routerlar ro'yxati hisoblanadi ushbu fayldagi ma'lumotlar Host uchun expose qilinadi va Host proekt avtomatik prefix qo'shadi.

export default [
  {
    path: "/",
    name: "MyPage",
    meta: { platonLayout: true },
    component: () => import("../views/MyStarterPage.vue")
  }, 
];

publicPath nima?

Webpack dagi Module Federation ishlatayotganda publicPath — bu build qilingan fayllar (chunks, remoteEntry.js va boshqalar) qaysi URL orqali yuklanishini bildiradigan base path. Webpack brauzerga fayllarni qayerdan olish kerakligini publicPath orqali biladi. publicPath host moduli uchun juda mukin hisoblanadi sizning modulingizdagi momponent va sahifalarni yuklash uchun publicPath foydalaniladi.

Xulosa

Yangi modul yozish uchun starterda barcha configlar sonlangan shared va starter modullarini yuklab oling va config .env portlarni sozlang. Starterdagi barcha component va sahifalar vue proektkabi bo'ladi. Qo'shimcha router va webpack sozlamalari mavjut. Sharedda mavjut bo'lmagan istalgan plugin yoki componentni npm paket sifatida yuklab olish mumkin host app barcha npm plugin va componentlarni qo'llab quvatlaydi.

Afzallikalri:

• Configa va pluginlar tayyor
• Theme va Componentlar Platon Shareddan olinadi
• Host modulisiz yangi modul yaratish imkoniyati

Next Steps

Endi project structure'ni tushunganingizdan so'ng, quyidagi tavsiya etilgan keyingi qadamlar:

1. Review Shared Components - Shared project'ni ko'rib chiqing va qanday reusable resource'lar mavjudligini bilib oling
2. Read the Documentation - Batafsil ma'lumot uchun boshqa qo'llanmalarni o'qishda davom eting