Windows 上の Nuxt.js の概要

  • [アーティクル]

Nuxt.js Web フレームワークをインストールし、Windows で稼働させるためのガイドです。

Nuxt.js は、Vue.js、Node.js、Webpack、Babel.js に基づいて、サーバー レンダリング JavaScript アプリを作成するためのフレームワークです。 これは Next.js から着想が得られました。 これは基本的に、Vue 用のプロジェクト定型文です。 Next.js と同様に、これはベスト プラクティスに注意して作成されており、"ユニバーサル" Web アプリを簡単かつ一貫した方法で、構成をほとんど必要とせずに作成できるようにします。 これらの "ユニバーサル" サーバー レンダリング Web アプリは "isomorphic" とも呼ばれることがあります。つまり、コードがクライアントとサーバーの間で共有されます。

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

前提条件

このガイドでは、読者が Node.js 開発環境を設定する手順を既に完了していることを前提にしています。これには以下が含まれます。

NodeJS アプリを使用する場合は、パフォーマンス速度の向上、システム コールの互換性の向上、Linux サーバーまたは Docker コンテナーを実行する場合の再利用のために、Linux 用 Windows サブシステムを使用することをお勧めします。

重要

WSL を使用して Linux ディストリビューションをインストールすると、ファイルを格納するためのディレクトリが作成されます\\wsl\Ubuntu-20.04 (Ubuntu-20.04 が、使用している Linux ディストリビューションに置き換えられます)。 Windows ファイルエクスプローラーでこのディレクトリを開くには、WSL コマンド ラインを開き、cd ~ を使用してホーム ディレクトリを選択します。次に、explorer.exe . コマンドを入力します。NodeJS をインストールしたり、使用するファイルをマウントされた C ドライブ (/mnt/c/Users/yourname$) に保存したりしないように注意してください。 そのようにすると、インストールとビルドにかかる時間が大幅に長くなります。

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 フレームワーク: なし、Ant Design Vue、Bootstrap Vue などを選択します。 この例では [Vuetify] を選択しましょう。ただし、Vue コミュニティが、プロジェクトに最も適したものを選択するために役立つこれらの UI フレームワークを比較した素晴らしいサマリーを作成しました。
    • カスタム サーバー フレームワーク: なし、AdonisJs、Express、Fastify などを選択します。 この例では [なし] を選択しましょう。ただし、Dev.to のサイトで 2019-2020 サーバー フレームワークの比較を見つけることができます。
    • Nuxt.js モジュール (Space キーを使ってモジュールを選択するか、不要な場合は単に入力します): Axios (HTTP 要求を簡易化)、PWA サポート (サービスワーカー、manifest.json ファイルの追加など) を選択します。 この例では、モジュールを追加しないようにしましょう。
    • リンティング ツール: ESLint、Prettier、Lint のステージングされたファイルを選択します。 [ESLint] (コードを分析し、潜在的なエラーを警告するためのツール) を選択しましょう。
    • テスト フレームワーク: なし、JEST、AVA を選択します。 このクイックスタートではテストを行わないため、[なし] を選択しましょう。
    • 表示モード: Universal (SSR)、シングル ページ アプリ (SPA) を選択します。 この例では [Universal (SSR)] (ユニバーサル (SSR)) を選択しましょう。ただし、Nuxt.js のドキュメントにいくつかの違いが指摘されています。つまり、SSR にはアプリのサーバー レンダリングのための Node.js サーバーが必要であり、SPA は静的ホスティング用です。
    • 開発ツールの選択: jsconfig.json (Intellisense コード補完が機能するように VS Code に推奨されます)

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

    WSL-Remote Extension

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

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

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

  7. ローカル開発サーバーが起動します (クライアントとサーバーのコンパイルのための何種類かの見栄えのよい進行状況バーが表示されます)。 プロジェクトのビルドが完了すると、ターミナルに "正常にコンパイルされました" のメッセージとコンパイルにかかった時間が表示されます。 Web ブラウザーで http://localhost:3000 に移動して、新しい Nuxt.js アプリを開きます。

    Your Nuxt.js app running in localhost:3000

  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> の終了タグを置き換えて保存すると、ページが再度読み込まれます。

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

VS Code debug window and launch.json config icon

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