新しいNuxtは、過去のv2.10を特徴としています

NUXTは、多くのパフォーマンスとアプリケーションのセットアップベストプラクティスが焼き付けられた信じられないほどの開発者エクスペリエンスを提供します。最近のリリースでは、この開発者エクスペリエンスを次のレベルに引き上げることに取り組んできました。今日はいくつか探索しましょう。

これらの機能のいくつかを探索するために、リポジトリとサイトをセットアップしました！ここでチェックできます：

デモライブサイト

Nuxtコンテンツ

特に大規模なものを探しているのではなく、ブログのような小さなものを探している場合は、NUXTを外部のヘッドレスCMSとペアリングしてすべてのセットアップを実行する必要がなくなりました。 Nuxt Contentは、好みに基づいて、Markdown、CSV、YAML、またはXMLで構成を記述できるGitベースのヘッドレスCMSを提供します。利用可能なボックスの構成設定がいくつかあり、カスタム構成を作成することは、プロパティを作成するのと同じくらい簡単です。

これが開発の意味：ディレクトリに静的マークダウンファイルを書くことができ、それがあなたのブログになることができます！このコンテンツを生成するために通常NUXTで使用するのと同じ動的ページAPIを使用しています。

また、フルテキスト検索を箱から出して提供しています。これは、サードパーティのサービスを統合せずにブログにすばやく追加する素敵な機能です。

Debbie O'Brienによるこのチュートリアルは信じられないほどのガイドです。それは、それを設定するすべての部分を強くお勧めします。

Nuxtコンポーネント

私が何度も何度も何度も何度もやっていたことに気づいたことの1つは、すべてのコンポーネントでインポートコードを入力することでした。これを少し速くするためのスニペットがいくつかありますが、すべてのファイルにそれぞれを追加すると、まだ私の作品の流れが少し中断されていました。

NUXTコンポーネントモジュールスキャン、インポート、およびレジスタコンポーネントを使用するため、これを行う必要がなくなります。コンポーネントはコンポーネントディレクトリにある必要がありますが、レイアウト、ページ、コンポーネント自体で使用できます。

このモジュールの追加は、nuxt.config.jsの小さな変更です。

デフォルトのエクスポート{
  コンポーネント：True
}

真剣に、それだけです！

深いダイビングをご希望の場合は、Kruite Patelによるこの非常に包括的なガイドがカバーしています。

コンポーネントを繰り返し使用する場合、Nuxtはコンポーネントの共有チャンクを自動的に作成するなど、いくつかの優れた最適化を行います。ただし、ビルド時間に影響を与える可能性があるため、巨大なプロジェクトでこれを使用する場合は注意してください。

nuxt画像

Nuxt Imageは、最適化されたレスポンシブ画像のシームレスで迅速なサイズと変換を提供する新しいモジュールです。組み込みのオプティマイザーを使用したり、CloudinaryやFastlyなどのすぐに使用できる10人の人気プロバイダーを使用したりできます。

APIを使用することからのコード出力は標準およびタグであるため、ワークフローに統合する際に難読化はありません。

モジュールを追加すると、nuxt.config.jsの画像プロパティを介して画像に構成を追加し、ブレークポイント、プロバイダー、およびその他の構成を指定できます。

デフォルトのエクスポート{
  画像： {
    //「@nuxt/image」によって定義された画面サイズ：
    画面：{
      XS：320、
      SM：640、
      MD：768、
      LG：1024、
      XL：1280、
      XXL：1536、
      「2xl」：1536
    }、
    // `/_nuxt/image/file.png`に画像を生成します
     staticFileName： '[publicPath]/images/[name]  -  [hash] [ext]'、
     ドメイン：[
        「Images.unsplash.com」
    ]、、
    エイリアス：{
      Unsplash： 'https：//images.unsplash.com' '
    }
  }
}

これは、例として提供される、利用可能ないくつかのオプションのサンプリングにすぎません。完全なドキュメントはこちらです。

そして、使用法はVUEコンポーネントに似ています。

 <nuxt-img src="/nuxt-icon.png"></nuxt-img>

または

<nuxt-picture src="/nuxt-icon.png"></nuxt-picture>

詳細情報とすべてのオプションはこちらに記載されています。これが利用可能であることを私に知らせてくれたベン・ホンへの帽子のヒント。彼には、探索する価値のあるいくつかのnuxtリソースがあります！

サンプルリポジトリ

この機能をすべて使用するサンプルリポジトリを作成しました。これは、レシピエントリ、NuxtコンポーネントにNuxt-Contentを備えた小さなレシピブログです。そのため、インポートを定義する必要がなく、画像変換のNuxt-Imageが必要でした。

デモライブサイト

ここにアクセスして、すべてを実際に動作させたり、フォークしたり、遊んだり、自分のものにしたりできます。

ここでは、まだ完全に文書化されていない背景画像にnuxt画像で$ IMG APIをどのように使用したかを見ることができます。

Nuxtは信じられないほどの開発者体験を提供します。 Nuxtは、常により多くの更新が行われ、常に巧妙に実装された新しいバージョンを発表しています。 NUXTを使用することは絶えずそのような喜びであり、チームやシングル開発者にとっても素晴らしいフレームワークであることが証明されています。

以上が新しいNuxtは、過去のv2.10を特徴としていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。