src/client/app と src/client/theme-default のつなぎ込み

はじめに

• バージョン ... 0.4.1
• SHA-1 ハッシュ ... 582c5255e25e923d0ed7750dba1e830793e15a82

1. VitePress のディレクトリ構成
2. src/client/app と src/client/theme-default のつなぎ込み <-- いまココです。
3. Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み
4. Vite と VitePress のつなぎ込み
5. dev 編
6. build 編(未着手)

1. 概要

createApp を使い Vue インスタンスを作成しています。createApp, Vue 3 の API 変更の経緯は以下の資料に詳しいです。

• rfcs/active-rfcs/0009-global-api-change.md - vuejs/rfcs
• Vue 3 Tutorial (for Vue 2 Users)

2. コード

Vue インスタンスを生成している createApp 関数を、ざっくり抜粋します。この createApp 関数は、ルータの箇所でもう少し詳しく見て行きます。

/src/client/app/index.ts

import { createApp as createClientApp, createSSRApp, ref, readonly } from 'vue'


// ... 中略


export function createApp() {

  // ... 中略

  //
  // ここで Vue のインスタンスを生成しています。
  // またテーマと Vue のインスタンスがつなぎこまれていることもわかります。
  //
  const app =
    process.env.NODE_ENV === 'production'
      ? createSSRApp(Theme.Layout)
      : createClientApp(Theme.Layout)


  // ... 中略

  // Content には Vue コンポーネントに変換されたマークダウンファイルが
  // 入っています。詳細は、router の箇所で詳述します。
  app.component('Content', Content)
  
  // ... 中略

  //
  // enhanceApp を設定しています。
  //
  if (Theme.enhanceApp) {
    Theme.enhanceApp({
      app,
      router,
      siteData: siteDataRef
    })
  }

  // app だけではなく router も返しています。
  // router はルータの箇所で詳述します。
  return { app, router }
}

// inBrowser は dev の場合、有効になります。
// dev の場合は、ここでマウントしています。
// build の場合は、確認中です。
if (inBrowser) {
  const { app, router } = createApp()
  // wait unitl page component is fetched before mounting
  router.go().then(() => {
    app.mount('#app')
  })
}

• vuejs/vitepress - /src/client/app/index.ts

おわりに

以上になります。ありがとうございました。次は、以下の記事になります。ルータの実装を見て行きます。

• Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み