Windows で Nuxt.js を始める

Nuxt.js Web フレームワークをインストールし、Windows で起動して実行するのに役立つガイドです。

Nuxt.js は、Vue.js、Node.js、Webpack、Babel.jsに基づいてサーバーでレンダリングされた JavaScript アプリを作成するためのフレームワークです。 それは Next.jsに触発されました. これは基本的に Vue のプロジェクト定型です。 Next.jsと同様に、ベスト プラクティスに注意を払って作成されており、構成がほとんどなく、シンプルで一貫性のある方法で "ユニバーサル" Web アプリを作成できます。 これらの "ユニバーサル" サーバーレンダリング Web アプリは、"等形" とも呼ばれ、クライアントとサーバーの間でコードが共有されることを意味します。

Vue の詳細については、 Vue の概要 ページを参照してください。

[前提条件]

このガイドでは、次のような Node.js 開発環境を設定する手順が既に完了していることを前提としています。

• Linux ディストリビューション (Ubuntu など) を含む Linux 用 Windows サブシステム (WSL) をインストールし、WSL 2 モードで実行されていることを確認します。 これは PowerShell を開き、「wsl -l -v」と入力することによって確認できます。
• WSL 2に Node.js をインストールする: これには、バージョン マネージャー、パッケージ マネージャー、Visual Studio Code、リモート開発拡張機能が含まれます。

パフォーマンスの向上、システム呼び出しの互換性、および Linux サーバーまたは Docker コンテナーの実行時のパロディのために、NodeJS アプリを使用する場合は、Linux 用 Windows サブシステムを使用することをお勧めします。

Nuxt.js のインストール

Nuxt.jsをインストールするには、インストールする統合サーバー側フレームワーク、UI フレームワーク、テスト フレームワーク、モード、モジュール、リンターの種類に関する一連の質問に回答する必要があります。

1. WSL コマンド ラインを開きます (例:Ubuntu)。

2. 新しいプロジェクト フォルダーを作成し (mkdir NuxtProjects)、そのディレクトリに移動します (cd NuxtProjects)。

3. Nuxt.js をインストールし、プロジェクトを作成します（「my-nuxt-app」は、アプリ名にしたいものに置き換えてください）: npm create nuxt-app my-nuxt-app

4. Nuxt.js インストーラーから次の質問が表示されます。

   • プロジェクト名: my-nuxtjs-app
   • プロジェクトの説明: Nuxt.js アプリの説明。
   • 作成者名: GitHub エイリアスを使用します。
   • パッケージ マネージャー (Yarn または Npm ) を選択します。例では NPM を使用します。
   • UI フレームワークの選択: None、Ant Design Vue、Bootstrap Vue など。 この例では Vuetify を選択しましょうが、Vue Community では 、これらの UI フレームワークを比較して 、プロジェクトに最適な選択に役立つ優れた概要を作成しました。
   • カスタム サーバー フレームワーク (None、AdonisJs、Express、Fastify など) を選択します。 この例では [なし] を選択しますが、Dev.to サイトで 2019-2020 サーバー フレームワークの比較 を見つけることができます。
   • Nuxt.js モジュールを選択します (space キーを使用してモジュールを選択するか、不要な場合は入力します)。Axios (HTTP 要求を簡略化するため) または PWA サポート (サービス ワーカー、manifest.json ファイルの追加など) を します。 この例のモジュールは追加しません。
   • リンティングツールの選択: ESLint、Prettier、Lint ステージングファイル。 ESLint (コードを分析し、潜在的なエラーを警告するツール) を選択しましょう。
   • テスト フレームワーク ( None、Jest、AVA) を選択します。 このクイック スタート テストについては取り上げませんので、 なしを選択しましょう。
   • レンダリング モードの選択: ユニバーサル (SSR) またはシングル ページ アプリ (SPA)。 この例 ユニバーサル (SSR) を選択しましょうが、Nuxt.js ドキュメント いくつかの違いを指摘しています。SSR では、静的ホスティング用にアプリと SPA をサーバーレンダリングするために実行されている Node.js サーバーが必要です。
   • 開発ツールの選択: jsconfig.json (Intellisense コード補完が機能するように VS Code に推奨)

5. プロジェクトが作成されたら、 cd my-nuxtjs-app Nuxt.js プロジェクト ディレクトリを入力し、「 code . 」と入力して VS Code WSL-Remote 環境でプロジェクトを開きます。

   

6. Nuxt.js がインストールされたら、次の 3 つのコマンドを知る必要があります。

   • ホット リロード、ファイル監視、タスクの再実行を使用して開発インスタンスを実行するための npm run dev。
   • プロジェクトをコンパイルするための npm run build。
   • 実稼働モードでアプリを起動するための npm start。

   VS Code に統合された WSL ターミナルを開きます (表示 > ターミナル)。 ターミナル パスがプロジェクト ディレクトリ (つまり、~/NuxtProjects/my-nuxt-app$) を指していることを確認します。 次に、新しい Nuxt.js アプリの開発インスタンスをnpm run devを使用して実行します。

7. ローカル開発サーバーが起動します (クライアントとサーバーのコンパイル用に何らかのクールな進行状況バーが表示されます)。 プロジェクトのビルドが完了すると、ターミナルにコンパイルにかかった時間と共に "コンパイルに成功しました" と表示されます。 Web ブラウザーで http://localhost:3000 をポイントして、新しい Nuxt.js アプリを開きます。

   

8. VS Code エディターで pages/index.vue ファイルを開きます。 ページ タイトルの <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> を見つけて、<v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>に変更します。 Web ブラウザーが引き続き localhost:3000 に開いている状態で、変更を保存し、ホット リロード機能によってブラウザーで変更が自動的にコンパイルおよび更新されます。

9. Nuxt.js でエラーを処理する方法を見てみましょう。 タイトル コードが次のように表示されるように、</v-card-title> 終了タグを削除します: <v-card-title class="headline">This is my new Nuxt.js app!。 この変更を保存して、コンパイル中のエラーがブラウザーとターミナルに表示され、コード内でエラーが見つかる行番号と共に、 <v-card-title> の終了タグが見つからないことを知らせます。 </v-card-title> 終了タグを置き換えて保存すると、ページが再読み込みされます。

VS Code のデバッガーは、Nuxt.js アプリで F5 キーを選択するか、メニュー バーの デバッグ の表示 (Ctrl + Shift + D) に移動し、デバッグ コンソール 表示 (Ctrl + Shift + Y) を します。 [デバッグ] ウィンドウで歯車アイコンを選択すると、デバッグセットアップの詳細を保存するための起動構成 (launch.json) ファイルが作成されます。 詳細については、「VS Code デバッグ」を参照してください。

Nuxt.jsの詳細については、 Nuxt.js ガイドを参照してください。