アプリの初期化

    アプリのレイアウトを作成したら、今度はVueコンポーネントをマウントしてアプリを初期化する必要があります。Framework7の初期化パラメータについては、適切なFramework7 App Parametersのセクションで読むことができます。

    WebpackやRollup、またはES-nextモジュールをサポートする他のバンドルラーを使用していると仮定すると、以下のような構造になります。

    <!-- index.html -->
    
    <!DOCTYPE html>
    <html>
      <head>
        <!-- ... メタとスタイル ... -->
        <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
      </head>
      <body>
        <!-- アプリのルート要素 -->
        <div id="app"></div>
    
        <!-- スクリプトが自動注入される -->
      </body>
    </html>
    /* my-app.js */
    
    import { createApp } from 'vue'
    
    // F7バンドルのインポート
    import Framework7 from 'framework7/lite-bundle'
    
    // F7-Vue Plugin Bundleをインポートします(F7コンポーネントがすべて登録されています)。
    import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'
    
    // F7-Vueプラグインの初期化
    Framework7.use(Framework7Vue);
    
    // メインアプリコンポーネントのインポート
    import App from './app.vue';
    
    // アプリの初期化
    const app = createApp(App);
    
    // すべてのFramework7 Vueコンポーネントの登録
    registerComponents(app);
    
    // Vueアプリの実装
    app.mount('#app');
    
    <!-- app.vue -->
    
    <template>
      <!-- メインのFramework7 Appコンポーネントで、Framework7のパラメータを渡します。 -->
      <f7-app v-bind="f7params">
        <!-- 初期ページはroutes.jsで指定する -->
        <f7-view main url="/"></f7-view>
      </f7-app>
    </template>
    <script>
      import routes from './routes.js';
    
      export default {
        data() {
          return {
            // <f7-app>コンポーネントに渡すFramework7パラメータ
            f7params: {
              // アプリのルートを持つ配列
              routes,
              // アプリ名
              name: 'My App',
              // アプリのID
              id: 'com.myapp.test',
              // ...
            }
          }
        }
      }
    </script>
    

    上記の例では

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

    また、(アプリ内のページ間のナビゲーションがある場合)ルートで配列を指定しなければなりません。Vue Component Extensions、ルーターとルートについての情報は、Navigation Routerのセクションで確認してください。