RaiaEngine

Appearance

クイックスタート ​

原文

https://github.com/vuejs/vitepress/blob/3c40e9d9a8443433f49599111ee571d569de530d/docs/en/guide/getting-started.md

オンラインで試してみる ​

VitePressをStackBlitzで直接ブラウザで試すことができます。

インストール ​

前提条件 ​

  • Node.js バージョン18以上
  • コマンドラインインターフェース（CLI）を通じてVitePressにアクセスするためのターミナル
  • Markdown構文をサポートするテキストエディタ

VitePressは単独で使用することも、既存のプロジェクトにインストールすることもできます。どちらの場合も、次のコマンドでインストールできます。

sh
$ npm add -D vitepress
sh
$ pnpm add -D vitepress
sh
$ yarn add -D vitepress
sh
$ yarn add -D vitepress vue
sh
$ bun add -D vitepress
依存関係が不足しているという警告が出ていますか？

PNPMを使用している場合、@docsearch/jsの依存関係が不足しているという警告が表示されることがありますが、これはVitePressの動作に支障をきたしません。この警告を抑制したい場合は、次の内容をpackage.jsonに追加してください。

json
"pnpm": {
  "peerDependencyRules": {
    "ignoreMissing": [
      "@algolia/client-search",
      "search-insights"
    ]
  }
}

注意

VitePressはESM専用のパッケージです。require()を使ってインポートしないでください。また、最寄りのpackage.jsonに"type": "module"が含まれていることを確認するか、関連ファイルの拡張子を.vitepress/config.jsから.mjs/.mtsに変更してください。詳細はViteのトラブルシューティングガイドを参照してください。また、非同期CJSコンテキスト内では、await import('vitepress')を使用できます。

セットアップウィザード ​

VitePressには、基本的なプロジェクトをスキャフォールドするためのコマンドラインセットアップウィザードが付属しています。インストール後、次のコマンドを実行してウィザードを開始します。

sh
$ npx vitepress init
sh
$ pnpm vitepress init
sh
$ yarn vitepress init
sh
$ bun vitepress init

いくつかの簡単な質問が表示されます。

Vueをピア依存関係としてインストール

VueコンポーネントやAPIを使用してカスタマイズを行う予定がある場合は、vueを明示的に依存関係としてインストールする必要があります。

ファイル構造 ​

スタンドアロンのVitePressサイトを構築する場合、現在のディレクトリ（./）にサイトをスキャフォールドできます。しかし、既存のプロジェクトにVitePressをインストールする場合は、他のソースコードと分離するために、ネストされたディレクトリ（例：./docs）にサイトをスキャフォールドすることをお勧めします。

例えば、./docsにVitePressプロジェクトをスキャフォールドした場合、生成されるファイル構造は次のようになります。

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

docsディレクトリはVitePressサイトのプロジェクトルートと見なされます。.vitepressディレクトリは、VitePressの設定ファイル、開発サーバーのキャッシュ、ビルド出力、およびテーマカスタマイズ用のコードのための予約場所です。

TIP

デフォルトでは、VitePressは開発サーバーのキャッシュを.vitepress/cacheに、プロダクションビルドの出力を.vitepress/distに保存します。Gitを使用している場合、これらを.gitignoreファイルに追加する必要があります。これらの場所は設定で変更可能です。

設定ファイル ​

設定ファイル（.vitepress/config.js）では、サイトのタイトルや説明など、VitePressサイトのさまざまな側面をカスタマイズできます。

js
// .vitepress/config.js
export default {
  // サイトレベルのオプション
  title: 'VitePress',
  description: 'Just playing around.',

  themeConfig: {
    // テーマレベルのオプション
  }
}

themeConfigオプションを使用して、テーマの動作をカスタマイズすることもできます。すべての設定オプションの詳細は設定リファレンスを参照してください。

ソースファイル ​

.vitepressディレクトリの外にあるMarkdownファイルはソースファイルと見なされます。

VitePressはファイルベースのルーティングを使用します。各.mdファイルは対応する.htmlファイルにコンパイルされ、同じパスでアクセスできます。例えば、index.mdはindex.htmlにコンパイルされ、生成されたVitePressサイトのルートパス/でアクセス可能です。

VitePressは、クリーンなURLの生成、パスの書き換え、動的なページ生成をサポートしています。これらについてはルーティングガイドで詳しく説明します。

サイトの起動 ​

セットアッププロセス中に許可した場合、次のnpmスクリプトがpackage.jsonに追加されます。

json
{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  ...
}

docs:devスクリプトは、即時ホットアップデート付きのローカル開発サーバーを起動します。次のコマンドで実行します。

sh
$ npm run docs:dev
sh
$ pnpm run docs:dev
sh
$ yarn docs:dev
sh
$ bun run docs:dev

npmスクリプトを使用せずに、直接VitePressを実行することもできます。

sh
$ npx vitepress dev docs
sh
$ pnpm vitepress dev docs
sh
$ yarn vitepress dev docs
sh
$ bun vitepress dev docs

コマンドラインでの使用方法の詳細はCLIリファレンスに記載されています。

開発サーバーはhttp://localhost:5173で実行されているはずです。ブラウザでそのURLにアクセスして、新しいサイトを確認してください！

次に進むべきこと ​

  • Markdownファイルが生成されたHTMLにどのようにマッピングされるかを理解するために、ルーティングガイドに進んでください。
  • ページ上でできること、例えばMarkdownコンテンツの作成やVueコンポーネントの使用について知るために、ガイドの「執筆」セクションを参照してください。最初にMarkdown拡張機能を学ぶのがおすすめです。
  • デフォルトのドキュメンテーションテーマで