初始化应用

在有了应用布局后，我们现在需要挂载 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>

在上面的示例中

我们将 Framework7 参数传递给其属性中的 f7-app Framework7 主应用组件；
传递到 Vue 的 createApp 的根元素将用作 Framework7 的根元素

我们还必须指定包含路由的数组（如果我们在应用中使用页面之间的导航）。查看有关 Vue 组件扩展、路由器和路由的信息导航路由器部分。

改善本篇文档

在本页