Kom igång med Nuxt.js i Windows

En guide som hjälper dig att installera Nuxt.js webbramverk och komma igång i Windows.

Nuxt.js är ett ramverk för att skapa server-renderade JavaScript-appar baserat på Vue.js, Node.js, Webpack och Babel.js. Den inspirerades av Next.js. Det är i grunden en projektmall för Vue. Precis som Next.jsär den utformad med uppmärksamhet på bästa praxis och gör att du kan skapa "universella" webbappar på ett enkelt, konsekvent sätt, med knappt någon konfiguration. Dessa "universella" serverrederade webbappar kallas ibland även "isomorfiska", vilket innebär att koden delas mellan klienten och servern.

Mer information om Vue finns på översiktssidan för Vue .

Förutsättningar

Den här guiden förutsätter att du redan har slutfört stegen för att konfigurera din Node.js utvecklingsmiljö, inklusive:

• Installera Windows-undersystemet för Linux (WSL) inklusive en Linux-distribution (t.ex. Ubuntu) och kontrollera att det körs i WSL 2-läge. Du kan kontrollera detta genom att öppna PowerShell och ange: wsl -l -v
• Installera Node.js på WSL 2: Detta inkluderar en versionshanterare, pakethanterare, Visual Studio Code och tillägget Fjärrutveckling.

Vi rekommenderar att du använder Windows-undersystemet för Linux när du arbetar med NodeJS-appar för bättre prestandahastighet, systemanropskompatibilitet och för parodi när du kör Linux-servrar eller Docker-containrar.

Viktigt!

Om du installerar en Linux-distribution med WSL skapas en katalog för lagring av filer: \\wsl\Ubuntu-20.04 (ersätt Ubuntu-20.04 med den Linux-distribution du använder). Om du vill öppna den här katalogen i Utforskaren i Windows öppnar du WSL-kommandoraden, väljer din hemkatalog med och cd ~anger sedan kommandot explorer.exe . Var noga med att inte installera NodeJS eller lagra filer som du kommer att arbeta med på den monterade C-enheten (/mnt/c/Users/yourname$). Om du gör det blir installationen och byggtiden avsevärt långsammare.

Installera Nuxt.js

Om du vill installera Nuxt.jsmåste du besvara en rad frågor om vilken typ av integrerat ramverk på serversidan, UI-ramverk, testramverk, läge, moduler och linter som du vill installera:

1. Öppna en WSL-kommandorad (dvs. Ubuntu).

2. Skapa en ny projektmapp: mkdir NuxtProjects och ange den katalogen: cd NuxtProjects.

3. Installera Nuxt.js och skapa ett projekt (ersätt "my-nuxt-app" med vad du vill anropa din app): npm create nuxt-app my-nuxt-app

4. Installationsprogrammet för Nuxt.js kommer nu att ställa följande frågor:

   • Projektnamn: my-nuxtjs-app
   • Projektbeskrivning: Beskrivning av min Nuxt.js-app.
   • Författarens namn: Jag använder mitt GitHub-alias.
   • Välj pakethanteraren: Yarn eller Npm – vi använder NPM för våra exempel.
   • Välj gränssnittsramverk: None, Ant Design Vue, Bootstrap Vue osv. Låt oss välja Vuetify för det här exemplet, men Vue Community skapade en fin sammanfattning som jämförde dessa gränssnittsramverk för att hjälpa dig att välja den bästa passformen för ditt projekt.
   • Välj anpassade serverramverk: None, AdonisJs, Express, Fastify osv. Låt oss välja Ingen för det här exemplet, men du kan hitta en 2019-2020-serverramverksjämförelse på Dev.to-webbplatsen.
   • Välj Nuxt.js moduler (använd blanksteg för att välja moduler eller tryck enter om du inte vill välja någon): Axios (för att förenkla HTTP-begäranden) eller PWA-stöd (för att lägga till en servicearbetare, manifest.json fil, osv.). Vi ska inte lägga till en modul för det här exemplet.
   • Välj lintningsverktyg: ESLint, Prettier, Lint staged-filer. Nu ska vi välja ESLint (ett verktyg för att analysera koden och varna dig för potentiella fel).
   • Välj ett testramverk: None, Jest, AVA. Vi väljer Ingen eftersom vi inte går igenom testningen i den här snabbstarten.
   • Välj återgivningsläge: Universal (SSR) eller enkeltsidapplikation (SPA). Låt oss välja Universal (SSR) i vårt exempel, men Nuxt.js dokument peka på några av skillnaderna – SSR som kräver en Node.js server som körs för serverrendering av din app och SPA för statisk värd.
   • Välj utvecklingsverktyg: jsconfig.json (rekommenderas för VS Code så intellisense-kodkomplettering fungerar)

5. När projektet har skapats cd my-nuxtjs-app anger du din Nuxt.js projektkatalog och öppnar code . sedan projektet i VS Code WSL-Remote-miljön.

   

6. Det finns tre kommandon som du behöver veta när Nuxt.js har installerats:

   • npm run dev för att köra en utvecklingsinstans med snabb inläsning, filvisning och uppgiftsåterkörning.
   • npm run build för att kompilera projektet.
   • npm start för att starta appen i produktionsläge.

   Öppna WSL-terminalen som är integrerad i VS Code (Visa > terminal). Kontrollera att terminalsökvägen är riktad mot projektkatalogen (dvs. ~/NuxtProjects/my-nuxt-app$). Prova sedan att köra en utvecklingsinstans av din nya Nuxt.js app med hjälp av: npm run dev

7. Den lokala utvecklingsservern startar (visar någon form av häftiga förloppsstaplar för klient- och serverkompilering). När projektet är klart visar terminalen "Kompilerad korrekt" tillsammans med hur lång tid det tog att kompilera. Öppna webbläsaren och gå till http://localhost:3000 för att öppna din nya Nuxt.js-app.

   

8. pages/index.vue Öppna filen i VS Code-redigeraren. Leta upp sidrubriken <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> och ändra den till <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>. När webbläsaren fortfarande är öppen för localhost:3000 sparar du ändringen och märker att funktionen för snabbinläsning automatiskt kompilerar och uppdaterar ändringen i webbläsaren.

9. Nu ska vi se hur Nuxt.js hanterar fel. Ta bort den </v-card-title> avslutande taggen så att rubrikkoden nu ser ut så här: <v-card-title class="headline">This is my new Nuxt.js app!. Spara den här ändringen och observera att ett kompileringsfel visas i webbläsaren och i terminalen, så att du vet att en avslutande tagg för <v-card-title> saknas, tillsammans med radnumren där felet finns i koden. Ersätt den avslutande taggen </v-card-title>, spara och sidan laddas om.

Du kan använda VS Code-felsökningsprogrammet med din Nuxt.js-app genom att välja F5-nyckeln eller genom att gå till Visa > felsökning (Ctrl+Skift+D) och Visa > felsökningskonsol (Ctrl+Skift+Y) i menyraden. Om du väljer kugghjulsikonen i felsökningsfönstret skapas en startkonfigurationsfil (launch.json) där du kan spara information om felsökningskonfigurationen. För att lära dig mer, se Felsökning i VS Code.

Mer information om Nuxt.jsfinns i Nuxt.js guide.