クイックスタート

インストール

前提条件

• Node.js のバージョンは 18 以上である必要があります。
• 既存のプロジェクトにインストールする場合は、vitepress@1.0.0-rc.31以上が必要です。

インストール方法

VitePress-Helper は 2 つのインストール方法をサポートしています：

• コマンドラインでインストールウィザードを実行する
• 既存のプロジェクトに直接インストールし、その後設定(config.js)とテーマ(theme)を手動で変更する。

インストールウィザード

npx @huyikai/vitepress-helper init
# または
npm install -g @huyikai/vitepress-helper
vitepress-helper init

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

# プロジェクト名
# 作者
# バージョン
# ローカルCMSが必要ですか？

既存のプロジェクトにインストール

npm i @huyikai/vitepress-helper -D
npm i vue
npm i @huyikai/local-cms

TIP

VitePress-Helper には home.vue というカスタムホームページコンポーネントが追加されているため、Vue の対応する依存関係をインストールする必要があります。カスタムホームページが不要な場合はインストールする必要はありません。また、後続の手順で home.vue ファイルを作成する必要もありません。

ローカル CMS 機能が必要な場合は、@huyikai/local-cms をインストールする必要があります。

config.js を変更する

import vitepressHelper, { config } from '@huyikai/vitepress-helper';
import { defineConfigWithTheme } from 'vitepress';

// vitepress-helperのデフォルト設定
const vitepressHelperConfig = {
  directory: 'docs',
  collapsible: true
};

// vitepressのデフォルト設定
const vitepressConfig={
  title:'サイトのタイトル',
  description:'サイトの説明',
  themeconfig:{
    ...
  },
  ...
}

export default async () => {
  const vitepressHelperInstance = await vitepressHelper({
    ...vitepressHelperConfig,
    ...vitepressConfig
  });
  return defineConfigWithTheme({
    extends: config,
    ...vitepressHelperInstance
  });
};

ディレクトリ .vitepress/theme を作成し、その中に home.vue と index.js ファイルを作成します

<script setup lang="ts">
import VPDoc from 'vitepress/dist/client/theme-default/components/VPDoc.vue';
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
</script>
<template>
  <!-- 任意のカスタムコンテンツを追加できます。例： -->
  <div>カスタムホームページのコンテンツ</div>

  <!-- ここでVPDocコンポーネントは、docsディレクトリのindex.mdの内容をレンダリングします。 -->
  <VPDoc />
</template>
<style></style>

import Home from './home.vue';
import theme from '@huyikai/vitepress-helper/theme/index';

export default {
  extends: theme,
  enhanceApp: ({ app }) => {
    app.component('Home', Home);
  }
};

起動と実行

インストールウィザードは以下のスクリプトを自動的に package.json に挿入します。既存のプロジェクトにインストールする場合は、package.json に以下のスクリプトがあることを確認してください

{
  ...
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "cms": "node node_modules/@huyikai/local-cms/cms.js docs",
  },
  ...
}

npm run dev：ローカル開発サーバーを起動します(vitepress-dev)。

npm run build：本番用の VitePress サイトをビルドします(vitepress-build)。

npm run cms：ローカル CMS サーバーを起動します。