A Vue.js vagy egyszerűen a Vue egy JavaScript-keretrendszer felhasználói felületek létrehozására. Ez a keretrendszer kibővíti a szabványos HTML-t és CSS-t, hogy eszközgyűjteményt hozzon létre az interaktív felhasználói felületek létrehozásához.
Ha HTML-ből, CSS-ből és vanília JavaScript-ből érkezik, a Vue.js megtanulása nagyon egyszerű. Ez a keretrendszer nem vezet be olyan új szintaxist, mint a JSX, hanem arra támaszkodik, amit már ismer.
A Vue komponens alapú és deklaratív programozási modellt kínál egyszerű és összetett felhasználói felületek felépítéséhez.
Tartalomjegyzék
Miért Vue?
Vue az egyik legnépszerűbb JavaScript-keretrendszer. Globálisan a 2023-as StackOverflow felmérés bekerült a 10 legkedveltebb webes keretrendszer közé. Ez lehet néhány oka a népszerűségének;
- Komponens alapú architektúra: A Vue a Model-View-ViewModel (MVVM) architektúrát követi, ahol az üzleti logika el van választva a felhasználói felülettől. A komponens alapú architektúra megkönnyíti az újrafelhasználható kódbitek létrehozását, amelyek egyedileg frissíthetők.
- Könnyű: A Vue-t könnyűnek tervezték, ahol a minimális alapalkalmazás 16 kb.
- Nagy ökoszisztéma és közösség: A Vue eredetileg 2014-ben jelent meg, és azóta folyamatosan növekszik. Nagy közösséget vonzott, amely különféle eszközök és könyvtárak fejlesztésével járult hozzá növekedéséhez.
Vue könyvtárak
A Vue könyvtárak és keretrendszerek gyűjteményével rendelkezik, amelyek segítségével leegyszerűsítheti webfejlesztési útját. A Vue-könyvtárak és -keretrendszerek előre megírt kódrészletek gyűjteménye, amelyeket többek között olyan feladatokban használhat fel, mint a felhasználói felületek létrehozása, állapotkezelés, stílus- és űrlapkezelés.
A Vue UI könyvtárak célja, hogy segítsék a fejlesztőket a felhasználói felületek gyors és hatékony felépítésében. A Vue UI könyvtárakat a következő módokon használhatja fel a gyors fejlesztés érdekében;
- Válassza ki a megfelelő keretrendszert/könyvtárat: Számos keretrendszer/könyvtár létezik, és a legjobbak kiválasztása gondot okozhat. Kutasson és olvasson dokumentációt, amely segít a döntéshozatalban.
- Használjon előre beépített komponenseket: Rengeteg időt takaríthat meg, ha felhasználja az ezen könyvtárak által biztosított alapkódot.
- Testreszabás és tematika: Minden márkának megvan a maga hangja. Az ideális Vue könyvtárnak/keretrendszernek lehetővé kell tennie, hogy a témáját a márkájának megfelelően testreszabja.
- Közösségi támogatás: Mindig válasszon olyan könyvtárakat, amelyeknek aktív közösségük van. A közösség legtöbb tagja mindig készségesen segít, ha elakad.
Ezek a legjobb VueJS UI könyvtárak és keretrendszerek, amelyeket ma kipróbálhat;
Vuetify
Vuetify egy Vue.js keretrendszer gyors és funkciókban gazdag webalkalmazások készítéséhez. Ezt a keretrendszert úgy alakították ki, hogy a fejlesztők rendelkezésére álljon minden olyan eszköz, amely a vonzó felhasználói élmény kialakításához szükséges.
Főbb jellemzők:
- Rugalmas összetevők: Ebben a keretrendszerben minden komponens a Google-re épül Anyagtervezési specifikáció. Ezek az összetevők több száz testreszabást támogatnak, amelyek illeszkednek a különböző kialakításokhoz és stílusokhoz.
- Dinamikus témák: A Vuetify két témával rendelkezik, amelyeket könnyedén módosíthat igényeinek megfelelően. Módosíthatja a betűtípusokat és a színeket, hogy illeszkedjenek a márkájához.
- Globális alapértékek: A Vuetify-alkalmazások beállításakor beállíthatja az alapértelmezett prop értékeket összetevőnként vagy globálisan. A globális osztályok és stílusok meghatározása megkönnyíti a kód újrafelhasználását, és csökkenti az ismétlődő kódok számát az alkalmazásban.
BootstrapVue
BootstrapVue egy olyan keretrendszer, amely lehetővé teszi, hogy a Vue.js és a Boostrap használatával mobil-elsőként érzékeny webalkalmazásokat készítsen. Ez a keretrendszer 85+ összetevőből, 1200+ ikonból és 54+ pluginből álló gyűjteményt tartalmaz, amelyek megkönnyítik a webalkalmazások létrehozását.
Főbb jellemzők:
- Moduláris: A BootstrapVue összetevői kis és újrafelhasználható kódrészletekre vannak lebontva. Így csak azt importálja, amire szüksége van az alkalmazásban.
- Reszponzív: Ez a keretrendszer a Bootstrap-et használja, a legnépszerűbb CSS-keretrendszert, amely az érzékeny kialakításáról ismert. A BootstrapVue segítségével létrehozott alkalmazásokat különböző képernyőméreteken használhatja.
- Konfigurálható: Ez a keretrendszer lehetővé teszi témák létrehozását SCSS-változók használatával, globálisan deklarálja ezeket a változókat, és újra felhasználja őket az alkalmazásban.
kvazár
kvazár egy többplatformos VueJS keretrendszer. Ennek a keretrendszernek az összetevői az anyagtervezési elveket követik. A Quasar App Extensions lehetővé teszi, hogy egyszerű vagy összetett beállításokat adjon hozzá az alkalmazáshoz. Használhatja az egyesített moduldefiníciót is, és JS-, HTML- és CSS-címkéket szúrhat be az alkalmazásba.
Főbb jellemzők:
- All-in-one platform: Ugyanazt a forráskódot használhatja mobil-, web-, asztali és progresszív webalkalmazásaihoz.
- Változatos reszponzív webes összetevők: Minden funkcióhoz van egy összetevő, amelyet a Quasar alkalmazáshoz szeretne építeni.
- Automatizált tesztelés és auditálás: Integrálja az egység és a végpontok közötti tesztelést, hogy automatikusan tesztelje az alkalmazást az összeállítás során.
Vuesax
Vuesax a Vue.js használatával létrehozott felhasználói felület (UI) összetevők keretrendszere. A keretrendszer célja a fejlesztők tapasztalatának egyszerűsítése azáltal, hogy frissítő dizájnt és független testreszabásokat biztosít az összetevőknek.
Főbb jellemzők:
- Könnyen használható: A Vuesax használatának megkezdéséhez nincs szükség szakértői ismeretekre a JavaScript vagy a Vue területén. Ez a keretrendszer jól dokumentált, és ez minden, amire szüksége van az induláshoz.
- Moduláris: Igény szerint használhatja a Vuesax összetevőket, mivel a kódja kis, újrafelhasználható bitekre van felosztva.
- Egyedi komponensek: A Vuesax nem követ semmilyen tervezési mintát, ami azt jelenti, hogy olyan egyedi terveket biztosít, amelyeket más keretrendszerekben valószínűleg nem lát.
Ant Design Vue
Ant Design Vue a Vue és az Anti Design segítségével létrehozott felhasználói felület-összetevők gyűjteménye. Ezeket az összetevőket úgy tervezték, hogy segítsék a fejlesztőket interaktív felhasználói felületek létrehozásában. Telepítse az Ant Design Vue-t az npm vagy a Yarn használatával, és kezdje el építeni a Vue alkalmazást.
Főbb jellemzők:
- Több környezet támogatása: A keretrendszer segítségével épített alkalmazások futhatnak modern böngészőkön. Az Anti Design Vue is fut rajta Elektron és támogatja a szerveroldali renderelést.
- Testreszabható témák: Testreszabhatja az Ant Design Vue alapértelmezett témáját, hogy illeszkedjen márkájához vagy üzleti követelményeihez. Módosíthatja például az elsődleges színt, a szegély sugarát és a szegély színét.
Elem
Elem egy Vue-alapú komponenskönyvtár projektmenedzserek, fejlesztők és tervezők számára. Ez a könyvtár valós logika alapján készült, és megfelel a gyakori felhasználók szokásainak. Az elem az Angular és React számára is elérhető.
Főbb jellemzők:
- Könnyen használható: Az Element telepítéséhez használhat csomagkezelőt, például npm-et vagy fonalat. Ezután kiválaszthatja a kívánt összetevőket, és hozzáadhatja őket az alkalmazáshoz.
- Testreszabható téma: A könyvtár alapértelmezett témája az Ön igényei szerint testreszabható. Egyéni témáját is importálhatja.
- Navigáció: Leegyszerűsítheti a felhasználói interakciókat az „oldalsávi navigáció” vagy a „felső navigáció” hozzáadásával.
Buefy
Buefy a Bulma alapú Vue könnyű felhasználói felület-összetevőinek gyűjteménye. Ezt a komponenskönyvtárat úgy tervezték, hogy JavaScript-rétegként működjön a Bulma felületen. Telepítheti a Buefyt csomagkezelőkkel, vagy közvetlenül hozzáadhatja a projekthez CDN-hivatkozások segítségével.
Főbb jellemzők:
- Könnyű: A Buefy a Vue és a Bulma tetejére készül. Ennek az összetevő-könyvtárnak nincs más függősége.
- Modern: A Buefy modern UI keretrendszerek, a Vue.js és a Bulma segítségével készült. Ennek a könyvtárnak a komponensei így frissek, és a modern tervezési mintákat követik.
- Reszponzív: A Buefy segítségével létrehozott alkalmazásokat használhatja személyi számítógépeken és eszközökön.
- Testreszabható: Ez a könyvtár számos összetevőt tartalmaz, amelyeket igényeinek megfelelően testre szabhat.
Csakra UI
Csakra UI egy moduláris komponenskönyvtár, amely építőelemeket kínál a Vue alkalmazások gyors felépítéséhez. Ezt a könyvtárat az npm segítségével telepítheti, és egyetlen társfüggősége az @emotion/css.
Főbb jellemzők:
- Összeállítható: A könyvtár összetevőiből új dolgokat hozhat létre, és integrálhatja azokat más keretrendszerekkel/könyvtárakba egyszerű vagy összetett felhasználói felületek létrehozásához.
- Témázható: Hivatkozhat bármely komponensen vagy a teljes alkalmazáson a téma értékeire.
- Hozzáférhető: Ez az összetevőkönyvtár a WAI-ARIA szabványok követésére készült.
PrimeVue
PrimeVue a Vue-alkalmazások felépítéséhez szükséges felhasználói felület-összetevők gyűjteménye. Ha ezt a könyvtárat „Stílus nélküli” módban használja, használhat olyan CSS-keretrendszereket, mint a Tailwind, a Bootstrap vagy a PrimeFlex. A PrimeVue több mint 90 összetevőt tartalmaz, amelyek megfelelnek a különböző igényeknek. Ezek az összetevők különböző kategóriákba vannak csoportosítva a fejlesztés megkönnyítése érdekében.
Főbb jellemzők:
- Testreszabható témák: Alaptémaként használhatja bármelyik kedvenc CSS-keretrendszerét, mint például a Bootstrap, a Tailwind, a Material UI stb.
- Tématervező: A PrimeVue minden olyan eszközt biztosít, amelyre szüksége van egy téma tervezéséhez a semmiből.
- Sablonok: Ebben a könyvtárban számos professzionálisan megtervezett sablon található, amelyeket igényeinek megfelelően testreszabhat.
Szemantikus UI Vue
Szemantikus UI Vue integrálja a Vue.js-t a szemantikus felhasználói felülettel. Mielőtt importálná az alkalmazásba, játszhat a kódjával a CodeSandboxon. Telepítse a Semantic UI Vue alkalmazást az npm használatával, importálja a main.js vagy index.js fájlba, és kezdje meg az összetevők importálását.
Főbb jellemzők:
- Testreszabás és tematika: Ez a könyvtár szemantikai összetevőket tartalmaz, amelyeket könnyen testre szabhat, hogy illeszkedjen márkájához és hangjához.
- Kiterjedt dokumentáció: Annak ellenére, hogy a Semantic UI Vue még mindig „erős fejlesztés alatt” áll, alaposan dokumentálják.
- Reszponzív kialakítás: A könyvtár összetevői tökéletesen működnek különböző képernyőméreteken.
Keen UI
Keen UI egy könnyű Vue UI könyvtár, amelyet a Google Material Design ihlette. Ez a könyvtár a JavaScriptet igénylő interaktív összetevők biztosítására összpontosít. A Keen UI-t a legtöbb CSS-keretrendszerrel használhatja.
Főbb jellemzők:
- Könnyen használható: Telepítse a Keen UI-t az npm segítségével, és azonnal importálja összetevőit.
- Támogatja a testreszabást: Testreszabhatja a Keen UI alkalmazás különböző szempontjait, beleértve az összetevők méretét, a téma színeit és az alapértelmezett kellékeket.
- Böngésző támogatás: A Keen UI támogatja az összes főbb, a Vue 3 által támogatott böngészőt.
Core UI
Core UI a Vue.js UI összetevők és Vue.js felügyeleti sablonok gyűjteménye, amelyek segítségével interaktív alkalmazásokat készíthet. Ez a könyvtár minden olyan eszközt kínál, amely a funkcionális és modern Vue alkalmazások létrehozásához szükséges.
Főbb jellemzők:
- Könnyen használható: A Core UI összes UI-összetevője és widgete-je olvashatóra van írva. Végignézheti az összetevők kódját, és testreszabhatja az igényeinek megfelelően.
- Böngészők közötti kompatibilitás és válaszkészség: A Core UI-alkalmazásokat a legtöbb modern böngészőn használhatja. Ezek az alkalmazások különböző képernyőméretekre és operációs rendszerekre is reagálnak.
- Nincs szükség tervezési készségekre: Nem kell tehetséges tervezőnek lenned ahhoz, hogy gyönyörű és érzékeny alkalmazásokat készíts. A Core UI professzionálisan megtervezett sablonokat tartalmaz, amelyeket igényeinek megfelelően testre szabhat.
Vue anyag
Vue anyag egy olyan keretrendszer, amely integrálja a Vue.js és a Material Design specifikációit. A platform igény szerinti komponenseket, könnyen használható API-t és dinamikus témákat kínál az alkalmazásfejlesztés egyszerűsítésére.
Főbb jellemzők:
- Változatos összetevők: A Vue UI szinte minden olyan összetevőt tartalmaz, amely egy modern webalkalmazás elkészítéséhez szükséges. Gondoljon a kártyákra, avatárokra, dátumválasztókra, figyelmeztetésekre, gombokra és űrlapokra.
- Témák: A Vue Material 4 előre beépített témával rendelkezik az alkalmazás beállításához. Ezeknek a témáknak a különböző aspektusait igényeinek megfelelően testreszabhatja.
- Egyéni témák: Létrehozhat egyéni témát a projekthez, amennyiben engedélyezte az SCSS/SASS támogatást a projektben.
VueTailwind
VueTailwind a Tailwind CSS-hez optimalizált Vue-összetevők gyűjteménye. A Vue Taiwind összetevői egyéni osztályok és korlátlan változatok felhasználásával készültek, amelyek megkönnyítik az alkalmazás testreszabását.
Főbb jellemzők:
- Moduláris: A VueTailwind olyan szerkezetű, hogy csak azokat a részeket tudja importálni, amelyekre szüksége van az alkalmazásban.
- Különböző összetevők: A VueTailwind különböző összetevőket tartalmaz, amelyek különböző kategóriákba vannak csoportosítva. Testreszabhatja az összetevőket, megjelenítheti a változtatásokat, és importálhatja őket az alkalmazásba.
- Témakészítő: Létrehozhat egy témát az alkalmazáshoz, testreszabhatja, és elképzelheti, hogyan fog megjelenni a végső alkalmazásban.
Becsomagolás
Mostantól könyvtárak és keretrendszerek gyűjteménye áll rendelkezésére, amelyek segítségével felgyorsíthatja a Vue-alkalmazások felhasználói felületének fejlesztési folyamatát. Egyes keretrendszerek biztosítják a csupasz csontokat, míg mások mindent megadnak, ami egy működőképes alkalmazás felépítéséhez szükséges.
Ezután felfedezheti a legjobb VueJS tanfolyamokat és könyveket.