ホームページ > 記事 > ウェブフロントエンド > Vue.js ユニバーサルアプリケーションフレームワーク - Nuxt.js 分析

Vue.js ユニバーサルアプリケーションフレームワーク - Nuxt.js 分析

不言オリジナル: 2018-06-29 11:58:241659ブラウズ

この記事では主に Vue.js のユニバーサルアプリケーションフレームワーク - Nuxt.js の入門チュートリアルを紹介します。編集者が非常に優れていると感じたので、参考として共有します。エディターをフォローして見てみましょう

React と Vue で構築されたシングルページアプリケーションの場合、SEO はよく知られた問題です。現時点ではサーバーサイドレンダリング (SSR-server Side Render) が最良の解決策と思われます。 React アプリケーションには Next.js があり、Vue のソリューションは Nuxt.js です。

1. はじめに

公式ウェブサイト: https://nuxtjs.org/

Nuxt.js とは何ですか?

Nuxt.js は、Vue.js に基づくユニバーサルアプリケーションフレームワークです。

Nuxt.js は、クライアント/サーバーインフラストラクチャを抽象的に編成することにより、主にアプリケーションの UI レンダリングに焦点を当てます。

私たちの目標は、新しいプロジェクトのインフラストラクチャコードを初期化したり、既存の Node.js プロジェクトで Nuxt.js を使用したりできる、柔軟なアプリケーションフレームワークを作成することです。

Nuxt.js は、Vue.js を使用してサーバーサイドレンダリングアプリケーションを開発するために必要なさまざまな設定をプリセットします。

さらに、Vue.js に基づいてアプリケーションに対応する静的サイトを生成する機能を提供する nuxt generated というコマンドも提供しています。

このコマンドによって提供される機能は、さまざまなマイクロサービスを統合する Web アプリケーションの開発に向けた新しい一歩であると考えています。

Nuxt.js は、フレームワークとして、非同期データの読み込み、ミドルウェアのサポート、レイアウトのサポートなど、クライアント/サーバーの典型的なアプリケーションアーキテクチャパターンに多くの便利な機能を提供します。

2. 最初の Nuxt.js プロジェクトをビルドします

Nuxt が提供するテンプレートを使用することをお勧めします。 vue-cli がインストールされていることが前提となっています。インストールされていない場合は、まず npm install vue-cli -g を実行して vue-cli をインストールしてください。

$ vue init nuxt-community/starter-template <project-name>

プロジェクトフォルダーに移動して、依存パッケージをインストールします。

cd <project-name>
npm install

プロジェクトを開始します。

npm run dev

ブラウザを開いて http://localhost:3000 にアクセスします。 Next によってレンダリングされたページが表示されます。

3. ページを追加します

新しく完成したプロジェクト構造は以下のようになります:

プロジェクト構造

Nuxt はすべてのページがページフォルダーに配置されることに同意し、Nuxt は対応するページを自動的に生成します。ディレクトリ構造のルーティングに基づきます。

次に、pages の下に新しい Vue ファイル test.vue を作成し、http://localhost:3000/test にアクセスして、追加したページを確認します。

4. サードパーティのプラグインを導入する

通常、フロントエンドコンポーネントやログなどのサードパーティのプラグインを導入する必要があります。
最初のステップはもちろんプラグインをインストールすることです。ここでは例として要素 UI を取り上げます。

npm install element-ui

element-ui パッケージをダウンロードしましたが、通常のプロジェクトのように直接インポートして Vue インスタンスで使用することはできません。 Nuxt のカーネルプロジェクトはすべて .nuxt ディレクトリにあり、以下のファイルを変更しても有効になりません。コンパイルのたびにファイルが再生成されるため、プロジェクトファイルを直接変更することは無効です。

カーネルプロジェクト構造

直接変更することはできませんが、Nuxt はサードパーティのプラグインを導入するための特別な方法を提供します。

最初のステップは、pulgin フォルダーに新しい js ファイル element-ui.js を作成することです。ファイルの内容は以下の通りです。

import Vue from &#39;vue&#39;
import Element from &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;
Vue.use(Element)

2 番目のステップは、nuxt.config.js を変更することです。プラグイン属性を追加します。

/**
   * include third-party plugin
   */
  plugins: [&#39;~plugins/element-ui&#39;] // element-ui.js文件地址

再コンパイル後、Nuxt はサードパーティのプラグインをコンパイルして使用します。現時点では、サードパーティのプラグインは任意の Vue ファイルで使用できます。

5. 静的リソースファイル

静的リソースファイルを静的フォルダーに配置すると、http://localhost:3000/ を使用して静的リソースファイルにアクセスできます。

Nuxt は、動的ルーティングや ESLint コード検出など、さらに多くの機能を提供します。本日はここまでです。詳しくは公式サイトをご覧ください。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

Vue.js ユニバーサル アプリケーション フレームワーク - Nuxt.js 分析

関連記事

Vue.js ユニバーサルアプリケーションフレームワーク - Nuxt.js 分析