アプリを初期化

アプリレイアウトができたら、Vue コンポーネントをマウントしてアプリを初期化する必要があります。対応する Framework7 アプリパラメータセクションで、Framework7 の初期化可能なすべてのパラメータについて確認できます。

Webpack、Rollup、または ES-next モジュールをサポートする他のバンドラーを使用している場合、以下の構造になる可能性があります。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>

/* my-app.js */

import { createApp } from 'vue'

// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle'

// Import F7-Vue Plugin Bundle (with all F7 components registered)
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'

// Init F7-Vue Plugin
Framework7.use(Framework7Vue);

// Import Main App component
import App from './app.vue';

// Init App
const app = createApp(App);

// Register all Framework7 Vue components
registerComponents(app);

// Mounte Vue App
app.mount('#app');

<!-- app.vue -->

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app v-bind="f7params">
    <!-- initial page is specified in routes.js -->
    <f7-view main url="/"></f7-view>
  </f7-app>
</template>
<script>
  import routes from './routes.js';

  export default {
    data() {
      return {
        // Framework7 parameters that we pass to <f7-app> component
        f7params: {
          // Array with app routes
          routes,
          // App Name
          name: 'My App',
          // ...
        }
      }
    }
  }
</script>

上の例では

プロパティ内の f7-app メイン Framework7 アプリコンポーネントに Framework7 パラメータを渡します。
Vue の createApp に渡されたルート要素は Framework7 ルート要素として使用されます。

また、ルート（アプリ内でページ間でナビゲーションがある場合）を含む配列を指定する必要があります。 Vue コンポーネント拡張、ルーター、ルートに関する情報は、ナビゲーションルーターセクションを参照してください。

このドキュメントを改善する

このページ