Nuxtjsと私の個人的なウェブサイトを作成する

Nuxtjsによって提供されるコンテンツモジュールを使用して私の最初のブログ記事へようこそ!このポストで私は私の個人的なウェブサイトを作成nuxtjsと私の最初の本当の経験を説明します.

プロジェクト

まず、プロジェクト.私のプロジェクトは、私が長い間心に抱いていたものでしたが、する時間を見つけることができませんでした:単純な個人的なウェブサイトは、ウェブ上で可視性を得るために、私がすることのビットを示します.フランスのロックダウンのおかげで、このプロジェクトを始めました.私は、このウェブサイトで私が欲しかったものについて大まかな考えがありました:私がすること、私の仕事経験と技術の概要私と私が書くことができるブログのセクションに連絡するさまざまな方法.
My personal website

なぜnuxtjs？

私について知っている1つのものは、私がフロントエンド開発が好きであるということです.私はすでに角度と反応で現実世界の経験のビットを持っているので、私はVueを試してみたい.古典的なチュートリアル(学習によって学習の大ファンである)を越えて少し行く本当のプロジェクトのJS.同時に、私はVueで十分でないということを知っていました.JSからプロジェクト全体の構造を作成します.そしてここでnuxtjsと私はこのフレームワークで見た非常に最初の利点が来る.Nuxtjsとのプロジェクトの起動は非常に簡単です、それはあなたのためのすべてのセットアップの痛みの世話をする.それは私が開発し、取得からコンテンツを作成するに焦点を当てることができます.私もNuxtjs意見と機能が何であったかについて少し知っていました.

フィードバック?

Nuxtjsを知っているので、Nuxtjsで使ったことに飛び込む時間です.私が使用した主要なもののいくつかの独断的なリストであることを心に留めておいてください.Nuxtjsはそれよりもはるかに豊かです.

ダイナミックルーティング

PHPを覚えていますか?はい、私はPHPを言って、恐れないでください.Nuxtjsは、ファイル名とディレクトリ構造に基づいて、PHPが提案したものと非常によく似たルーティングシステムを持っています.
すべてはページディレクトリから始まる.内部では、ページとして使用されるファイルを作成します.ページでは、Vueを意味します.VJルータのルートにリンクされたJSコンポーネント.しかし、どのようにこれらのルートを定義するには?よく、あなたはしない!Nuxtjsがプロジェクトを構築するとき、それはあなたのページディレクトリの中に見え、ファイル名に基づいてあなたのためにそれを生成します.

pages/
--| index.vue
--| contact.vue
--| blog/
-----| index.vue
-----| _slug.vue

何が起こっているのですか.
最初にインデックスがあります.vueファイル.このページは、アプリケーションのルートをナビゲートするときに表示されます.あなたはそれを推測し、連絡先ページは/連絡先のパスに表示されます.
次に、インデックスファイルを持つサブディレクトリブログを持っています.このインデックスページは前のページと同じです.ILは現在のディレクトリのルートに表示されます.
最後に、ラグスラッグファイルがあります.Count - Ligg式は動的パラメータを表します.それは、私が/ブログ/何かにナビゲートするときはいつでも、私が値(この例で)何であるかについて、私がスラッグパラメタにアクセスするだろうということを、私は、ラグページを表示します.

レイアウト

レイアウトを簡単にあなたのアプリケーションの側面を構成することができます.それはページよりも1歩高い.私の場合、私は非常に簡単な方法でそれを使いました.

<Header />

<Nuxt />

<Footer />

The <Nuxt /> あなたのアプリケーションと現在のルートに応じて、あなたがしているページのコードに置き換えられます.Nuxtjsレイアウトの1つのユースケースだけで、簡単に解決策(モバイル/タブレット/デスクトップ)に従って特定のレイアウトを作成するなど、Nuxtjsドキュメントでより多くのユースケースを見つけることができます.

静的モード

私のお気に入りの機能の一つ!私は私の個人的なウェブサイトを知っていました-少なくとも最初のバージョンでは-私のコンテンツを表示するには、実行時に任意のAPIを要求する必要はありませんでした.したがって、すべての私のコンテンツは、ビルド時に生成することができます.しかし、どのように、私はそれを利用することができましたか?よくNuxtjs静的モードでは、正確な仕事をする!それはすべてのページを通過し、ビルド時にすべてのコンテンツを生成します.また、私は静的ホスティングサービスを使用することができます.
どのように静的モードを使用するには?Nuxtを更新します.設定.以下のプロパティを持つJSファイルです.

target: 'static'

Nuxtコンテンツ

私は、1つの特定の特徴を望みました:簡単にブログ柱を書いて、表示する能力.そうするために、私は最新のnuxtjsモジュールのうちの1つを試みました:@ nuxt/内容.
このモジュールをインストールするには、以下のように簡単です.

npm install @nuxt/content

そして新しいモジュールをnuxtに追加します.設定.js

{
   modules: [
      '@nuxt/content'
   ],
}

この時点で@ nuxt/contentモジュールがインストールされます.次は何ですか.あなたのコンテンツを作成する.あなたがしなければならないのは、コンテンツディレクトリにファイルを作成することですNuxt/コンテンツは、すべての種類のフォーマットをサポートします.私は個人的にそれが快適である形式としてMarkdownと行きました.注意する別のことは、あなたのコンテンツに加えて、コンテンツファイルにメタデータを追加することができます.私の場合、タイトル、説明、イメージを追加しました.
最後のステップ:どのように私はちょうど私が作成したコンテンツを表示します.まず、それをフェッチする必要があります.そのために、私はNuxtjsアプリのすべてのページで利用可能なAsyncDataメソッドを使用しました.このメソッドは、一致するルートに移動し、コンポーネントを初期化する前に呼び出されます.このメソッドでは、コンテキストオブジェクトにアクセスできます.@ nuxt/contentモジュールを加えることによって、この文脈オブジェクトは我々が我々の内容と対話するのを助ける$ contentプロパティで豊かにされます.コンテンツを取得するには、次のようになります.

const article = await $content('articles', params.slug).fetch()

return { article }

パラメータはあなたが探している内容のパスを定義します.パラメータが定義されていない場合、デフォルトはコンテンツディレクトリのルートになります.私の場合、私は自分のコンテンツを整理するためのサブディレクトリを作成しました.それで、私は記事と呼ばれているサブディレクトリの中に内容を求めています、そして、私の現在のURLでスラグパラメータとして名前をつけられます.
ブログ紹介ページは次のようになります.

私が最も評価したもの？

私はnuxtjsで働くことの多くの単純さを評価しました.いいえ、複雑な構成で失われたり、ライブラリの数をインポートします.あなただけの簡潔な、読みやすく、アーキテクチャや構成を取得するから、あなたのアイデアやコンテンツを操作することができます.これはまた、ドキュメントの明快さとNuxtjsブログのセクションで見つけることができる素晴らしい記事のおかげで非常によく動作します.そのためのビッグサム
つの例はこの記事ですCreating a blog with @nuxt/content デビーオブライエンによって.それを通してたくさんのことを学んだので、私のブログを作成するのには大きな助けとなりました.

私が持っていた最大の闘争？

このプロジェクトに直面した最大の闘争は、イメージの読み込みについてでした.私は、私が書くすべての記事にイメージを関連付けることに決めました.あなたが現在読んでいる記事のために、私の最初の反射はこのサイトの他のすべてのイメージのように、資産フォルダーにイメージを加えることでした.しかし、私のイメージは、決して見つかりませんでした.このイメージとの違いは、私のイメージが動的にロードされたということでした.
そのため、Webpackバンドルアプリは、この特定のイメージが使用されていると判断することはできません.確かに、それはビルド時間であなたのアプリケーションでの明示的な使用を見つけたことがない.それで、それはあなたの最終的な束からそれを取り除きます!解決策の一つは、資産フォルダーの代わりに静的フォルダーにイメージを入れることでした.このフォルダーの内容は、ビルドタイム解析なしで常に最終的なバンドルの一部です.あなたが同じ問題に遭遇するならば、この説明が若干の闘争時間を節約することを願っています.

結論

何を結論するか私はこのプロジェクトでNuxtjsについて多くを学びました、そして、私は私が発見したものが好きでした.Nuxtjsは本当に始めるのが簡単です.Vueでさえ、それは多くの経験を必要としません.jsとすぐに物事に焦点を当てることができます:あなたのアイデア.これは、フレームワークとNuxtjsでの作業を非常に成功したときに探しているものです.また、私のプロジェクトのユースケースのために、私が必要とした機能(スタティックモード、@ nuxt/contentなど)の量は楽に利用できました.
私はあなたがこの記事でいくつかの新しいものを学んだことを願って、それはあなた自身の個人的なウェブサイトを作成し、Nuxtjsを試してみたいという願望を与えた!
この読書の後、あなたの考えを知ってください、そして、その間、安全なままでいてください!