ホームページ > 記事 > ウェブフロントエンド > Nuxt.js Vueのサーバーサイドレンダリングの詳しい説明

Nuxt.js Vueのサーバーサイドレンダリングの詳しい説明

小云云オリジナル: 2018-02-09 10:11:341764ブラウズ

Nuxt.js は非常にシンプルで使いやすいです。単純なプロジェクトでは、依存コンポーネントとして nuxt を追加するだけで済みます。この記事では主にNuxt.js Vueのサーバーサイドレンダリングについて紹介しており、参考になれば幸いです。

Vue は、シンプルでわかりやすい API、効率的なデータバインディング、柔軟なコンポーネントシステムにより、多くのフロントエンド開発者に好まれています。多くの国内企業がプロジェクト開発にVueを使用しています。私たちが使用しているJianshuはVueをベースに構築されています。

SPA フロントエンドレンダリングには 2 つの大きな問題点があることがわかっています: (1) SEO。検索エンジンクローラーがクライアントによってレンダリングされたページのメタ情報やその他の SEO 関連情報をクロールするのは困難であり、ユーザーが検索エンジンで Web サイトを検索できなくなります。 (2) ユーザーエクスペリエンス。大規模な WebApp をパッケージ化した後の js は非常に大きくなるため、require.js などのモジュールごとの読み込み、非同期リクエストが発生します。 Webpack が普及すると、コード分割が行われます。それでも、ユーザーのデバイスによっては、ページの最初のレンダリングが依然として非常に遅く、白い画面になるまでの待ち時間が長すぎるため、ますますうるさくなっているユーザーグループには受け入れられません。

そのため、公式サイトなどのプロモーションページを表示するものは、サーバーサイドレンダリング(SSR)を行う必要があります。 nuxt.js をインストールします

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的

// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

Run

npm run dev

アプリケーションは http://localhost:3000 で実行されています

注: Nuxt.js はページ内のファイルの変更をリッスンします新しいページを追加するときにアプリケーションを手動で再起動する必要はありません。

ルーティング

nuxtは、ページのディレクトリ構造に基づいてルーティング構成を生成します

非同期データasyncData

asyncDataを呼び出すにはページコンポーネントが必要であることに注意してください(つまり、コンポーネントの下で呼び出すことはできません。ルーティングページになります)

非同期データ beforeCreate、created

注: vue コンポーネントのライフサイクルでは、beforeCreate と created の 2 つのフックのみがブラウザ側とサーバー側の両方で呼び出されます。ブラウザ側で呼び出されます。

プラグインmint-uiを使用します

まず、プラグインファイルmint-ui.jsをプラグインフォルダーに追加する必要があります

import Vue from "vue";
import Mint from "mint-ui";

Vue.use(Mint);

nuxt.config.jsのプラグインフィールドを構成します

/**
  * 配置第三方插件
  */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

layoutレイアウト

1.nuxt.jsは、レイアウトレイアウトという新しい概念を実装しており、レイアウトレイアウトを通じてページの複数のレイアウトを簡単に切り替えることができます。このプロジェクトでは、一般的に使用される 3 つのレイアウトが実装されています。1) 左側の列が固定され、右側の列の幅が動的である 2 列レイアウト。2. エラーページプロンプト。中央にプロンプトボックスがあるレイアウトスキーム。ページの 3. 真っ白なページレイアウト。

特別に開発されたページでは、デフォルトのレイアウトを使用する場合、ページのレイアウトを指定する必要はありません。レイアウトが指定されていないページは、nuxt フレームワークによって自動的にデフォルトのレイアウトに関連付けられます。レイアウトを指定する必要がある場合は、レイアウト欄にレイアウトを指定します。図に示すように、完全なレイアウトはログインページで指定されます。

Nuxt.js Vueのサーバーサイドレンダリングの詳しい説明

関連記事