検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Nuxt.js の動作: Vue.js サーバー側レンダリング フレームワーク

Nuxt.js の動作: Vue.js サーバー側レンダリング フレームワーク

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-31 06:35:10231ブラウズ

Nuxt.js in action: Vue.js server-side rendering framework

Nuxt.js プロジェクトを作成する

まず、Node.js と、yarn または npm がインストールされていることを確認してください。次に、コマンドラインを使用して新しい Nuxt.js プロジェクトを作成します。

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

作成プロセス中に、UI フレームワーク、プリプロセッサなどのオプションが必要かどうかを選択し、必要に応じて構成できます。

ディレクトリ構造

Nuxt.js は特定のディレクトリ構造に従います。主要なディレクトリの一部は次のとおりです。

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions
  • .nu​​xt/: このディレクトリは自動的に生成され、コンパイルされたコードが含まれます。通常、直接変更する必要はありません。
  • assets/: CSS、JavaScript、画像などのコンパイルされていない静的リソースを保存します。 Nuxt.js はビルド中にこれらのリソースを処理します。
  • コンポーネント/: アプリケーションのさまざまな部分で再利用できるカスタム Vue コンポーネントを保存します。
  • layouts/: ページのレイアウトを定義します。デフォルトのレイアウトまたは複数の特定のレイアウトが存在する可能性があります。
  • Pages/: 各ファイルはルートに対応し、ファイル名がルート名になります。動的ルートは角括弧 [] で表されます。
  • middleware/: ページのレンダリングの前後にロジックを実行できるカスタム ミドルウェアを配置します。
  • plugins/: Vue.js プラグインのカスタム エントリ ファイル。
  • static/: 何も処理せずにビルド出力ディレクトリに直接コピーされ、robots.txt や favicon.ico などの保存によく使用されます。
  • store/: Vuex 状態管理ディレクトリ。ストア全体のアクション、ミューテーション、ゲッター、エントリー ファイルを保存します。
  • nuxt.config.js: Nuxt.js 構成ファイル。プロジェクト設定のカスタマイズに使用されます。
  • package.json: プロジェクトの依存関係とスクリプト構成。
  • yarn.lock または npm.lock: プロジェクトの依存関係の正確なバージョンを記録して、さまざまな環境での依存関係の一貫性を確保します。

ページのレンダリング

pages/ ディレクトリにindex.vue ファイルを作成します。これはアプリケーションのホームページです:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Nuxt.js ページ レンダリングのプロセスは、サーバー側レンダリング (SSR) とクライアント側レンダリング (CSR) の 2 つの主要な段階に分かれています。 Nuxt.js ページ レンダリングの詳細な手順は次のとおりです。

初期化:

ユーザーはブラウザに URL を入力し、サーバーにリクエストを送信します。

サーバーはリクエストを受信した後、処理を開始します。

ルート解決:

Nuxt.js は、nuxt.config.js のルート設定 (存在する場合) を使用するか、pages/ ディレクトリからルートを自動的に生成します。

pages/index.vue や pages/about.vue など、対応するページ ファイルが識別されます。

データのプリフェッチ:

Nuxt.js は、ページ コンポーネントで asyncData または fetch メソッドを探します (存在する場合)。

これらのメソッドはサーバー側で実行され、API または他のデータ ソースからデータを取得します。

データが取得されると、シリアル化されてページ テンプレートに挿入されます。

テンプレートのレンダリング:

Nuxt.js は、Vue.js のレンダリング エンジンを使用して、コンポーネントとプリフェッチされたデータを HTML 文字列に変換します。
HTML 文字列には、クライアントが必要とするすべての初期データが含まれており、