Rozpocznij pracę z Nuxt.js w systemie Windows

Przewodnik ułatwiając zainstalowanie platformy internetowej Nuxt.js i rozpoczęcie pracy w systemie Windows.

Nuxt.js to struktura umożliwiająca tworzenie renderowanych na serwerze aplikacji JavaScript opartych na Vue.js, Node.js, webpack i Babel.js. Zainspirował go Next.js. Jest to w zasadzie szablon projektu dla Vue. Podobnie jak Next.js, jest ona tworzona z uwzględnieniem najlepszych rozwiązań i umożliwia tworzenie "uniwersalnych" aplikacji internetowych w prosty, spójny sposób z prawie żadną konfiguracją. Te "uniwersalne" aplikacje internetowe renderowane przez serwer są również czasami nazywane "izomorficzne", co oznacza, że kod jest współużytkowany między klientem a serwerem.

Aby dowiedzieć się więcej na temat programu Vue, zobacz stronę Vue overview (Omówienie Vue).

Wymagania wstępne

W tym przewodniku założono, że zostały już wykonane kroki konfigurowania środowiska deweloperskiego Node.js, w tym:

• Zainstaluj podsystem Windows dla systemu Linux (WSL), w tym dystrybucję systemu Linux (np. Ubuntu) i upewnij się, że działa w trybie WSL 2. Możesz to sprawdzić, otwierając program PowerShell i wprowadzając następujące polecenie: wsl -l -v
• Install Node.js on WSL 2: Obejmuje to menedżera wersji, menedżera pakietów, Visual Studio Code i rozszerzenie do zdalnego programowania.

Zalecamy używanie podsystemu Windows dla systemu Linux podczas pracy z aplikacjami NodeJS, aby uzyskać lepszą szybkość wydajności, zgodność wywołań systemowych i parodię podczas uruchamiania serwerów z systemem Linux lub kontenerów platformy Docker.

Ważne

Zainstalowanie dystrybucji systemu Linux za pomocą programu WSL spowoduje utworzenie katalogu do przechowywania plików: \\wsl\Ubuntu-20.04 (zastąpić ubuntu-20.04 dowolną dystrybucją systemu Linux, której używasz). Aby otworzyć ten katalog w Eksploratorze plików systemu Windows, otwórz wiersz polecenia WSL, wybierz katalog główny przy użyciu cd ~polecenia , a następnie wprowadź polecenie explorer.exe . Zachowaj ostrożność, aby nie instalować środowiska NodeJS lub przechowywać pliki, z którymi będziesz pracować na zainstalowanym dysku C (/mnt/c/Users/yourname$). W ten sposób znacznie spowolni czas instalacji i kompilacji.

Zainstaluj Nuxt.js

Aby zainstalować Nuxt.js, należy odpowiedzieć na szereg pytań dotyczących rodzaju zintegrowanej platformy po stronie serwera, struktury interfejsu użytkownika, struktury testowania, trybu, modułów i linter, które chcesz zainstalować:

1. Otwórz wiersz polecenia WSL (tj. Ubuntu).

2. Utwórz nowy folder projektu: mkdir NuxtProjects i wprowadź ten katalog: cd NuxtProjects.

3. Zainstaluj Nuxt.js i utwórz projekt (zastępując 'my-nuxt-app' nazwą, którą chcesz nadać swojej aplikacji): npm create nuxt-app my-nuxt-app

4. Instalator Nuxt.js będzie teraz zadawać następujące pytania:

   • Nazwa projektu: my-nuxtjs-app
   • Opis projektu: opis mojej aplikacji Nuxt.js.
   • Nazwa autora: używam mojego aliasu usługi GitHub.
   • Wybierz menedżera pakietów: Yarn lub npm — w naszych przykładach używamy narzędzia NPM.
   • Wybierz strukturę interfejsu użytkownika: Brak, Ant Design Vue, Bootstrap Vue itp. W tym przykładzie wybierzmy Vuetify, ale społeczność Vue utworzyła ładne podsumowanie porównanie tych struktur interfejsu użytkownika, aby ułatwić wybór najlepszego dopasowania do projektu.
   • Wybierz niestandardowe struktury serwerów: Brak, AdonisJs, Express, Fastify itp. W tym przykładzie wybierzmy None, ale możesz znaleźć 2019-2020 server framework comparison w witrynie Dev.to.
   • Wybierz moduły Nuxt.js (użyj spacji, aby wybrać moduły lub po prostu naciśnij enter, jeśli nie chcesz żadnych): Axios (w celu uproszczenia żądań HTTP) lub obsługa PWA (do dodawania service worker, manifest.json pliku itp.). Nie dodawajmy modułu dla tego przykładu.
   • Wybierz narzędzia linting: ESLint, Prettier, Lintuj zmienione pliki. Wybierzmy ESLint (narzędzie do analizowania kodu i do ostrzegania przed potencjalnymi błędami).
   • Wybierz platformę testową: None, Jest, AVA. Wybierzmy opcję None, ponieważ nie omówimy testowania w tym przewodniku Szybki start.
   • Wybierz tryb renderowania: Uniwersalny (SSR) lub Aplikacja Jednostronicowa (SPA). W naszym przykładzie wybierzmy universal (SSR), ale w dokumentacji Nuxt.js wskazać niektóre różnice — usługa SSR wymaga serwera Node.js uruchomionego do renderowania aplikacji i spa na potrzeby hostingu statycznego.
   • Wybierz narzędzia programistyczne: jsconfig.json (zalecane dla Visual Studio Code, aby funkcja uzupełniania kodu IntelliSense działała poprawnie)

5. Po utworzeniu projektu cd my-nuxtjs-app wprowadzić katalog projektu Nuxt.js, a następnie wprowadź code ., aby otworzyć projekt w środowisku WSL-Remote programu VS Code.

   

6. Istnieją 3 polecenia, które należy znać po zainstalowaniu Nuxt.js:

   • npm run dev do uruchamiania instancji programistycznej z gorącym przeładowaniem, monitorowaniem plików i ponownym uruchamianiem zadań.
   • npm run build do kompilowania projektu.
   • npm start do uruchamiania aplikacji w trybie produkcyjnym.

   Otwórz terminal programu WSL zintegrowany w programie VS Code (Wyświetl > terminal). Upewnij się, że ścieżka terminalu wskazuje na katalog projektu (to znaczy ~/NuxtProjects/my-nuxt-app$). Następnie spróbuj uruchomić wystąpienie programistyczne nowej aplikacji Nuxt.js przy użyciu: npm run dev

7. Lokalny serwer programistyczny zostanie uruchomiony (wyświetlając różnego rodzaju efektowne paski postępu dla kompilacji klienta i serwera). Po zakończeniu kompilowania projektu terminal wyświetli komunikat "Skompilowany pomyślnie" wraz z ilością czasu, jaki zajęło skompilowanie. Otwórz przeglądarkę internetową i wpisz adres http://localhost:3000, aby otworzyć nową aplikację Nuxt.js.

   

8. pages/index.vue Otwórz plik w edytorze programu VS Code. Znajdź tytuł <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> strony i zmień go na <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>. Mając wciąż otwartą przeglądarkę internetową pod adresem localhost:3000, zapisz zmianę i zauważ, jak funkcja hot-reload automatycznie skompiluje i zaktualizuje zmianę w przeglądarce.

9. Zobaczmy, jak Nuxt.js obsługuje błędy. Usuń tag zamykający, </v-card-title> aby kod tytułu wyglądał następująco: <v-card-title class="headline">This is my new Nuxt.js app!. Zapisz tę zmianę i zwróć uwagę, że w przeglądarce zostanie wyświetlony błąd kompilowania, a w terminalu zostanie wyświetlony komunikat informujący o braku tagu <v-card-title> zamykającego wraz z numerami wierszy, w których można znaleźć błąd w kodzie. Zastąp </v-card-title> tag zamykający, zapisz, a strona zostanie ponownie załadowana.

Debugger programu VS Code można używać z aplikacją Nuxt.js, wybierając klawisz F5 lub przechodząc do pozycji Widok > Debug (Ctrl+Shift+D) i Widok > Konsola debugera (Ctrl+Shift+Y) w pasku menu. Jeśli wybierzesz ikonę koła zębatego w oknie Debugowanie, zostanie utworzony plik konfiguracji uruchamiania (launch.json), który umożliwi zapisanie szczegółów konfiguracji debugowania. Aby dowiedzieć się więcej, zobacz Debugowanie w VS Code.

Aby dowiedzieć się więcej na temat Nuxt.js, zobacz przewodnikNuxt.js.