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を使用できます。プログレッシブ ウェブ アプリ (プログレッシブ ウェブ アプリ)

• 統合された Google Analytics

• デフォルトの VuePress には以下が含まれます:
• レスポンシブ レイアウト

• オプションのホームページ

• シンプルなヘッド検索コンポーネント

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

1. 自動的に生成される GitHub リンクとページ編集リンク

2. 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

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

4. Progressbar コンポーネントの実践的なケース分析

5. vue のループトラバーサル命令とは何ですか

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