VuePressを使用して静的Webサイトを生成する方法

今回は、VuePress を使用して静的 Web サイトを生成する方法と、VuePress を使用して静的 Web サイトを生成する際の 注意事項 について説明します。以下は実際のケースです。

VuePress とは

VuePress は、Vue に基づく軽量の静的 Web サイト

ジェネレーター と、技術ドキュメントの作成に最適化されたデフォルトのテーマの 2 つの部分で構成されています。 これは、Vue 独自のサブプロジェクトのドキュメントのニーズを満たすために作成されました。

VuePress は、生成されたすべてのページにプリロードされた HTML を提供します。これは、読み込み速度が優れているだけでなく、SEO にも非常に適しています。ページが読み込まれると、Vue がすべての静的コンテンツを引き継ぎ、それを完全な SPA アプリケーションに変えます。ユーザーがナビゲーションを使用して入力すると、他のページもオンデマンドで読み込まれます。

VuePress の仕組み

VuePress アプリケーションは、実際には Vue、VueRouter、webpack に基づいています。以前に vue を使用したことがある場合、VuePress を使用して独自のテーマを開発またはカスタマイズすると、ユーザー エクスペリエンスが次のようになります。ほぼ同じです。Vue DevTools を使用して、カスタマイズしたテーマをデバッグすることもできます。

ビルドプロセス中に、VuePress はサーバー側でレンダリングされたバージョンを作成し、各ルートにアクセスして関連する HTML をレンダリングします。このアプローチは、Nuxt の nuxt generated コマンドや、Gatsby などの他のプロジェクトからインスピレーションを得ています。

各マークダウン ファイルは HTML にコンパイルされ、Vue コンポーネントのテンプレートとして処理されます。この方法では、Vue をマークダウン ファイル内で直接使用できるため、動的コンテンツを埋め込む必要がある場合に非常に便利です。

VuePressの機能

• 組み込みのマークダウン拡張機能は技術文書用に最適化されています

• マークダウンファイルで直接vueを使用できます

• vue

  ドライバー カスタマイズ可能なペイントテーマ

• PWAをサポート- プログレッシブ ウェブ アプリ

• 統合された Google Analytics

• デフォルトの VuePress には以下が含まれます:

1. レスポンシブ レイアウト

2. オプションのホームページ

3. シンプルなヘッダー

   検索コンポーネント

4. カスタマイズ可能なナビゲーション バーとサイドバー

5. 自動生成された GitHub リンクとページ編集リンク

VuePress マークダウンで Vue + webpack 開発環境をお楽しみください Vue コンポーネントを使用し、Vue を通じてカスタム テーマを開発します。 VuePress は、生成されたすべてのページにプリロードされた HTML を提供します。これは、読み込み速度が優れているだけでなく、SEO にも非常に適しています。ページが読み込まれると、Vue がすべての静的コンテンツを引き継ぎ、それを完全な SPA アプリケーションに変えます。ユーザーがナビゲーションを使用して入力すると、他のページもオンデマンドで読み込まれます。

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

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

推奨読書:

ELがコンテキストパラメータ値を取得する方法(コード付き)

JSで左右のリストを相互に移動させる

Vueカスタムダイナミックの使用方法の詳細な説明コンポーネント

以上がVuePressを使用して静的Webサイトを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。