Kezdje el a Nuxt.js használatát a Windows rendszeren

Útmutató a Nuxt.js webes keretrendszer telepítéséhez és a Windowson való üzembe helyezéséhez.

Nuxt.js egy keretrendszer a kiszolgáló által renderelt JavaScript-alkalmazások létrehozásához Vue.js, Node.js, Webpack és Babel.jsalapján. Next.jsihlette. Ez alapvetően egy Vue projektsablon. Csakúgy, mint Next.js, ez is az ajánlott eljárásokra való odafigyeléssel készült, és lehetővé teszi az "univerzális" webalkalmazások egyszerű, konzisztens létrehozását, alig konfigurálva. Ezeket az "univerzális" kiszolgálói renderelt webalkalmazásokat néha "izomorfikusnak" is nevezik, ami azt jelenti, hogy a kód meg van osztva az ügyfél és a kiszolgáló között.

A Vue-ról további információt a Vue áttekintési oldalán talál.

Előfeltételek

Ez az útmutató feltételezi, hogy már elvégezte a Node.js fejlesztési környezet beállításának lépéseit, beleértve a következőket:

• Telepítse a Linuxhoz készült Windows-alrendszert (WSL), beleértve a Linux-disztribúciót (például az Ubuntu-t), és győződjön meg arról, hogy wSL 2 módban fut. Ezt a PowerShell megnyitásával és a következő beírással ellenőrizheti: wsl -l -v
• Telepítse a Node.js-et a WSL 2-re: Ez magában foglalja a verziókezelőt, a csomagkezelőt, a Visual Studio Code-ot és a távoli fejlesztési bővítményt.

Javasoljuk, hogy a NodeJS-alkalmazásokkal való munka során használja a Linux windowsos alrendszerét a jobb teljesítménysebesség, a rendszerhívások kompatibilitása és a paródiához Linux-kiszolgálók vagy Docker-tárolók futtatásakor.

Fontos

A Linux-disztribúció WSL-vel való telepítése létrehoz egy könyvtárat a fájlok tárolásához: \\wsl\Ubuntu-20.04 (cserélje le az Ubuntu-20.04-et a használt Linux-disztribúcióra). Ha meg szeretné nyitni ezt a könyvtárat a Windows Fájlkezelőben, nyissa meg a WSL parancssort, válassza ki a kezdőkönyvtárat a használatával cd ~, majd írja be a parancsot explorer.exe . Ügyeljen arra, hogy ne telepítse a NodeJS-t, és ne tárolja a csatlakoztatott C meghajtón (/mnt/c/Users/yourname$). Ez jelentősen lelassítja a telepítési és buildelési időt.

Nuxt.js telepítése

A Nuxt.jstelepítéséhez több kérdésre kell válaszolnia azzal kapcsolatban, hogy milyen integrált kiszolgálóoldali keretrendszert, felhasználói felületi keretrendszert, tesztelési keretrendszert, módot, modulokat és lintert szeretne telepíteni:

1. Nyisson meg egy WSL-parancssort (azaz. Ubuntu).

2. Hozzon létre egy új projektmappát: mkdir NuxtProjects, és adja meg a következő könyvtárat: cd NuxtProjects.

3. Telepítse Nuxt.js és hozzon létre egy projektet (cserélje le a "my-nuxt-app"-et arra a névre, amit az alkalmazásnak szeretne adni): npm create nuxt-app my-nuxt-app

4. A Nuxt.js telepítője a következő kérdéseket fogja feltenni:

   • Projekt neve: my-nuxtjs-app (az én nuxtjs alkalmazásom)
   • Projekt leírása: Az Nuxt.js-alkalmazás leírása.
   • Szerző neve: A GitHub-aliasomat használom.
   • Válassza ki a csomagkezelőt: Yarn vagy Npm – az NPM-et használjuk a példáinkhoz.
   • Válassza a felhasználói felület keretrendszerét: Nincs, Ant Design Vue, Bootstrap Vue stb. Válasszuk a Vuetify-t ebben a példában, de a Vue Közösség létrehozott egy szép összefoglalást, amely összehasonlítja ezeket a felhasználói felületi keretrendszereket , hogy segítsen kiválasztani a projekthez leginkább illőt.
   • Válassza ki az egyéni kiszolgálói keretrendszereket: None, AdonisJs, Express, Fastify stb. Válasszuk a None lehetőséget erre a példára, de a Dev.to oldalon található egy 2019-2020-as szerver keretrendszer-összehasonlítás.
   • Válassza ki Nuxt.js modulokat (szóközzel válassza ki a modulokat, vagy egyszerűen adja meg, ha nem szeretne): Axios (a HTTP-kérelmek leegyszerűsítéséhez) vagy PWA-támogatás (szolgáltatás-feldolgozó, manifest.json fájl hozzáadásához stb.). Ne adjunk hozzá modult ehhez a példához.
   • Válasszon lintelési eszközöket: ESLint, Prettier, Szakaszolt fájlok lintelése. Válasszuk az ESLintet (amely a kód elemzésére szolgáló eszköz, és figyelmeztet a lehetséges hibákra).
   • Válasszon egy tesztelési keretrendszert: None, Jest, AVA. Válasszuk a Nincs opciót, mivel a tesztelést nem fogjuk áttekinteni ebben a gyorsútmutatóban.
   • Válassza a renderelési módot: Univerzális (SSR) vagy egyoldalas alkalmazás (SPA). Válasszuk a Univerzális (SSR) lehetőséget a példánkra, de a Nuxt.js dokumentáció rámutat néhány különbségre – az SSR-hez szükség van egy Node.js kiszolgálóra, amely az alkalmazást szerver rendersítéshez futtatja, míg az SPA statikus tárolásra lett tervezve.
   • Fejlesztői eszközök kiválasztása: jsconfig.json (a VS Code-hoz ajánlott, hogy az Intellisense kódkiegészítés működjön)

5. A projekt létrehozása után cd my-nuxtjs-app be kell írnia a Nuxt.js projektkönyvtárát, majd meg kell adnia code . a projektet a VS Code WSL-Remote környezetben való megnyitásához.

   

6. A Nuxt.js telepítése után 3 parancsot kell tudnia:

   • npm run dev egy fejlesztési példány gyorstöltéssel, fájlfigyeléssel és feladat újrafuttatásával történő futtatásához.
   • npm run build a projekt összeállításához.
   • npm start az alkalmazás éles módban való elindításához.

   Nyissa meg a VS Code-ba integrált WSL-terminált (Nézet > Terminál). Győződjön meg arról, hogy a terminál elérési útja a projektkönyvtárra mutat (például "~/NuxtProjects/my-nuxt-app$"). Ezután próbálkozzon az új Nuxt.js alkalmazás fejlesztési példányának futtatásával a következő használatával: npm run dev

7. Elindul a helyi fejlesztési kiszolgáló (menő folyamatjelző sávokat megjelenítve az ügyfél és a kiszolgáló fordításainál). Miután a projekt elkészült, a terminál megjeleníti a "Lefordítva sikeresen" szöveget, valamint azt, hogy mennyi ideig tartott a fordítás. Nyissa meg a webböngészőjében a(z) http://localhost:3000 oldalt az új Nuxt.js alkalmazás megnyitásához.

   

8. Nyissa meg a fájlt a pages/index.vue VS Code-szerkesztőben. Keresse meg a lap címét <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title>, és változtassa meg <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>-re. Miközben a böngésző még mindig nyitva van a localhost:3000 oldalon, mentse a módosítását, és figyelje meg, hogy a gyors újratöltési funkció automatikusan lefordítja és frissíti a módosítást a böngészőben.

9. Lássuk, hogyan kezeli a Nuxt.js a hibákat. Távolítsa el a </v-card-title> záró címkét, hogy a címkód így nézzen ki: <v-card-title class="headline">This is my new Nuxt.js app!. Mentse el ezt a módosítást, és figyelje meg, hogy a böngészőben és a terminálban egy kompilálási hiba jelenik meg, tájékoztatva arról, hogy hiányzik a <v-card-title> záró címke, valamint hogy mely sorokban található a hiba a kódban. Cserélje le a </v-card-title> záró címkét, mentse, és a lap újra betöltődik.

A VS Code hibakeresőjét az Nuxt.js alkalmazással használhatja az F5 billentyű kiválasztásával, vagy > Hibakeresési megtekintése (Ctrl+Shift+D) és A > Hibakeresési konzol megtekintése (Ctrl+Shift+Y) menüsávon. Ha a hibakeresési ablakban a fogaskerék ikont választja, a hibakeresési beállítások részleteinek mentéséhez létrejön egy indítási konfigurációs (launch.json) fájl. További információkért lásd: VS Code hibakeresés.

Ha többet szeretne megtudni a Nuxt.js-ról, tekintse meg a Nuxt.js útmutatót.