Nuxt.js Vue サーバー側レンダリングの探索

この記事では主にNuxt.js Vueのサーバーサイドレンダリングの詳細な説明を紹介しますので、参考にしてください。

この記事では、サーバーサイドレンダリングに nuxt を使用します https://zh.nuxtjs.org/

Nuxt.js は非常にシンプルで使いやすいです。単純なプロジェクトでは、依存コンポーネントとして nuxt を追加するだけで済みます。

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 <你的项目名字>

実行します

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フィールドを構成します

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

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

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

レイアウトレイアウト

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

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

上記は私があなたのためにまとめたものです。

関連記事:

jQueryを使用してマウス応答の透明度グラデーションアニメーション効果を実装する方法

jQueryで実装されたマウス応答のバッファアニメーション効果

jQueryでマウス応答のTaobaoアニメーション効果を実装する方法

以上がNuxt.js Vue サーバー側レンダリングの探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。