Nuxt.js の動作: Vue.js サーバー側レンダリングフレームワーク-jsチュートリアル-php.cn

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

ログイン後にコピー

.nuxt/: このディレクトリは自動的に生成され、コンパイルされたコードが含まれます。通常、直接変更する必要はありません。
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 ページレンダリングの詳細な手順は次のとおりです。