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)

<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 组件，我们可以包含另一个脚本包，其中注册了所有 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);