ウェブサイトビルダー「VuePress」の使い方

今回は、ウェブサイトビルダーVuePressの使い方と、ウェブサイトビルダーVuePressを使用する際の注意点について説明します。以下は実際の事例ですので、見てみましょう。

VuePress とは

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

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

このプロジェクトに次の機能があることを確認するには、公式ドキュメントを参照してください:

• 組み込みのマークダウン (基本機能)

• PWA をサポート

• Google Analytics を統合

• デフォルトのテーマ (スタイルと (公式) ドキュメント) [https://vuepress.vuejs.org] 一貫性あり)

• GitHub リンクとページ編集リンクが自動生成

すぐに始めましょう

インストール

初期化プロジェクト

npm init -ynpm init -y

安装 vuepress，也可以全局安装

npm install -D vuepress

创建文章文件夹

mkdir docs

配置package.json

{
 "scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}

书写

直接在docs文件夹下新建markdown文件即可编辑书写文章

预览

npm run docs:dev

打开 http://localhost:8080/

构建

npm run docs:build

vuepress をインストールします。グローバルにインストールすることもできます

npm install -D vuepress

記事フォルダーを作成します

mkdir docs

パッケージ .json を構成します

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

書き込み

記事を編集して書くために docs フォルダーに新しいマークダウン ファイルを直接作成します

プレビュー
npm run docs :dev

http:// localhost:8080/
Build

🎜🎜npm run docs:build を開きます🎜🎜 生成されたファイルは .vuepress/dist フォルダーにありますデフォルトでは🎜🎜カスタム構成🎜🎜構成ファイルを作成できます。.vuepress/config.jsに移動します🎜🎜トップナビゲーションを追加🎜

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

🎜サイドバーを追加🎜

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

🎜グループでのサイドバーの追加もサポートしています。例:🎜rrreee🎜この記事の事例を読んで方法をマスターした方は、さらに興味深い情報を入手してください。php 中国語 Web サイトの他の関連記事にも注目してください。 🎜🎜推奨読書: 🎜🎜🎜vueのループトラバーサル命令とは何ですか🎜🎜🎜🎜🎜 jQueryを使用してプログレスバー機能を手動でドラッグして制御する方法🎜🎜🎜

以上がウェブサイトビルダー「VuePress」の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。