Hogyan készítsünk Electron alkalmazást a Vue.js és a Vite segítségével
Kombináljuk az Electron erejét a Vue.js-szel és a Vite-val, hogy hihetetlen asztali alkalmazásokat hozzunk létre JavaScript-en kívül.
Ez a cikk eredetileg a "webhelyemen" jelent meg.
TL: DR
Klónozz ezt a repót, és használd kezdősablonként.
Az "electron-vue" meghalt, éljen az "electron-vue-template"
Úgy tűnik, hogy az „electron-vue”, a Vue.js-t és az Electront egyesítő vezető Github-tárház 2021. április 21. óta nem vállalt kötelezettséget. Az április 21-i kötelezettségvállalások előtt december 3-a óta nem volt komoly hozzájárulási tevékenység, 2019 és azt megelőzően 2018. október 23.
Lehet, hogy a repo még nem halt meg, de kifelé halad – a sikertelen buildek, a több száz nyitott probléma és az, hogy bizonyos eszközverziókhoz vannak zárva, mindez annak jele lehet.
A „vue-cli-plugin-electron-builder” szép, de nem az én csésze teám.
3,5 000 Github Stars-szal és körülbelül ugyanannyi támogatással, mint az elektron-vue, úgy döntöttem, hogy kipróbálom. Azt állítják, hogy futtassa a vue add electron-builder parancsot a Vue CLI 3 vagy 4 használatával létrehozott meglévő alkalmazásában, és ennyi, a Vue.js webalkalmazása most egy Electron példányon belül fut.
Egy friss Vue.js alkalmazással, amely a vue create használatával készült, majd azonnal futott a vue add electron-builder, sikerült elindítanom egy Electron példányt, ami valóban hihetetlen.
Bár lefordította és elindította, egy ExtensionWarning hibaüzenetet adott. A könyvtárszerkezetben való mozgás és a fájlnevek megváltoztatása tönkretette az alkalmazást. Bosszantó a dokumentáció elolvasása az olyan alapvető dolgok kezeléséhez, mint a fájlnév és a hely. Attól tartok, ez a csomag egy kicsit túl sok varázslat zajlik a színfalak mögött ahhoz, hogy kényelmesen használhassam.
Miért „electron-vue-template”? Csak 14 csillaga van!
Nagyon leegyszerűsített, nincs szükség felesleges függőségre.
Az elektron-vue-template átlátszó és könnyen kezelhető módon állványozza az oldalt. Nagyon szép könyvtárszerkezettel rendelkezik, így könnyen megemészthető és megérthető, hol történik a konfigurációs vagy a build kód. A node_module felépítési szkriptben nem történik varázslat a színfalak mögött.
Átlátszó jellege és jól strukturált kódja miatt. Ez a sablon tökéletesen kiindulópontként működik egy asztali alkalmazás VueJS és Electron használatával történő felépítéséhez.
Kevés veszteség ez a tárház holnap elveszíti egyetlen közreműködőjét. Mivel ez egy sablon, klónozhatja, és szétválaszthatja a kívánt darabokat.
Arról nem is beszélve, hogy Vite-val együtt jár!
A „Vite” a saját bajnokságában van a Hot Module Replacement (HMR) terén. Igény szerinti fájlkiszolgálásának köszönhetően az alkalmazások összeállítási ideje szinte azonnali – sokkal-sokkal gyorsabb, mint bármely más létező összeállítási eszköz.
A három említett csomag közül az electron-vue-template az egyetlen, amelybe beépített Vite tartozik. Ez önmagában is ok a sablon használatára.
Mi a következő lépés?
Az elmúlt hetekben az Electront egy személyes alkalmazásban használtam, amelyet hamarosan közzé fogok tenni. Elérkezett egy olyan szakaszba, amikor a háttér logikája összeomlott, és szüksége van egy UI-bővítésre, valamint egy olyan állapotkezelő rendszerre, mint a Vuex.
Hamarosan integrálni fogok egy államirányítási rendszert – akár a Vuex-et, akár a Pinia-t. Kíváncsian várom, hogyan néz ki ez a folyamat egy Vue-t használó Electron alkalmazásban, de igyekszem minden tőlem telhetőt megírni egy blogbejegyzést, miközben végigmegyek a folyamaton.
További tartalom: plainenglish.io. Iratkozzon fel ingyenes heti hírlevelünkre itt.
