Vue.jsのユニバーサルアプリケーションフレームワークNuxt.jsの使い方を詳しく解説

今回は、Vue.js ユニバーサル アプリケーション フレームワーク Nuxt.js の使用について詳しく説明します。Vue.js ユニバーサル アプリケーション フレームワーク Nuxt.js を使用する際の 注意事項 は何ですか?一見。

1. はじめに

公式ウェブサイト：

https://nuxtjs.org/

GitHub: https://github.com/nuxt/nuxt.js

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 をインストールしてください。

りー

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

りー

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

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

3.ページを追加

新しく完成したプロジェクト構造は以下の通りです:

プロジェクト構造

Nuxt は、すべてのページがページフォルダーに配置されることに同意し、Nuxt は

ディレクトリ構造に従って対応するルートを自動的に生成します。

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

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

通常、フロントエンド コンポーネントやログなどのサードパーティのプラグインを導入する必要があります。

最初のステップはもちろんプラグインをインストールすることです。ここでは例として要素 UI を取り上げます。
りー

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

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

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

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

りー

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

りー

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

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

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS で画像を中央に配置して一時停止する方法

Webpack が Electron アプリケーションを構築する方法

Angular 画像アップロードのプレビュー パスの問題の解決策

以上がVue.jsのユニバーサルアプリケーションフレームワークNuxt.jsの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。