Framework7 Vue パッケージ構造

パッケージ

Framework7 Vue パッケージには、次のファイルやフォルダが含まれます。

framework7-vue/
    components/
        accordion.js
        accordion.d.ts
        accordion-item.js
        accordion-item.d.js
        ...
    framework7-vue-bundle.js
    framework7-vue-bundle.d.ts
    framework7-vue.js
    framework7-vue.d.ts

Vue プラグイン

Framework7 Vue プラグインは ES モジュールとして提供されます。

// Import Framework7 Core
import Framework7 from 'framework7/lite';
/*
Or import bundle with all components:
import Framework7 from 'framework7/lite-bundle';
*/

// Import Framework7 Vue
import Framework7Vue from 'framework7-vue';

// Init plugin
Framework7.use(Framework7Vue)

デフォルトでは、Framework7-Vueプラグインのみを、Vueコンポーネントを含まずに出力します。コンポーネントを個別にインポートするには、名前付きインポートを使用する必要があります

<template>
  <f7-app>
    <f7-view>
      ...
    </f7-view>
  </f7-app>
</template>
<script>
import { f7App, f7View } from 'framework7-vue';

export default {
  components: {
    f7App,
    f7Navbar,
  },
  ...
}
</script>

バンドル

すべてのFramework7-Vueコンポーネントを含める必要がある場合は、Framework7-Vueプラグインの別のスクリプトバンドルを含めることができ、その中ですべてのVueコンポーネントが登録されています

// Import Vue
import { createApp } from 'vue';

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

// Import Framework7-Vue with helper to register all components
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';

// Import your main app component
import App from 'path/to/app.vue';

// Init plugin and register all components
Framework7.use(Framework7Vue);

// create Vue app
const app = createApp(App);

// register all Framework7 Vue components by passing Vue app instance there
registerComponents(app);

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

このページに

パッケージ
Vue プラグイン
バンドル