应用布局

我们应用的首先应当做的事情是在创建 index.html 文件的应用框架。Framework7 Vue 计划与 webpack 这样的打包器一同使用，因此 index.html 样式和脚本应当自動注入/生成。

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Framework7 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>

<div id="app"></div> 是你的主应用框架所在之处。你可以将它的内容作为组件挂载，或（仅是示例）我们可以在该 div 内开始编写应用框架

基本布局

让我们看一下非常基本的应用组件布局

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app v-bind="{ theme: 'auto', name: 'My App' }">
    <!-- Your main view, should have "main" prop -->
    <f7-view main>
      <!-- Initial Page -->
      <f7-page>
        <!-- Top Navbar-->
        <f7-navbar title="Awesome App"></f7-navbar>
        <!-- Toolbar-->
        <f7-toolbar bottom>
          <f7-link>Link 1</f7-link>
          <f7-link>Link 2</f7-link>
        </f7-toolbar>
        <!-- Page Content -->
        <p>Page content goes here</p>
        <f7-link href="/about/">About App</f7-link>
      </f7-page>
    </f7-view>
  </f7-app>
</template>

高级布局

现在，让我们浏览更多高级布局，在此处我们还将添加带有视图和弹出窗口的侧面板

<template>
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app v-bind="{ theme: 'auto', name: 'My App' }">

    <!-- Left Panel with "cover" effect -->
    <f7-panel left cover>
      <f7-view>
        <f7-page>
          <f7-navbar title="Left Panel"></f7-navbar>
          <f7-block>
            <p>Here comes the left panel text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Right Panel with "reveal" effect -->
    <f7-panel right reveal>
      <f7-view>
        <f7-page>
          <f7-navbar title="Right Panel"></f7-navbar>
          <f7-block>
            <p>Here comes the right panel text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!-- Main view-->
    <f7-view main>
      <f7-page>
        <f7-navbar title="Awesome App"></f7-navbar>
        <!-- Page content -->
        <f7-block>
          <p>Here comes main view page text</p>
        </f7-block>
        <!-- Buttons to open panels -->
        <f7-block class="grid grid-cols-2 grid-gap">
          <f7-button panel-open="left">Left Panel</f7-button>
          <f7-button panel-open="right">Right Panel</f7-button>
        </f7-block>
        <!-- Button to open popup -->
        <f7-button popup-open="#my-popup">Open Popup</f7-button>
      </f7-page>
    </f7-view>

    <!-- Popup. All modals should be outside of Views -->
    <f7-popup id="my-popup">
      <f7-view>
        <f7-page>
          <f7-navbar title="Popup">
            <!-- Link to close popup -->
            <f7-nav-right>
              <f7-link popup-close>Close</f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-block>
            <p>Here comes popup text</p>
          </f7-block>
        </f7-page>
      </f7-view>
    </f7-popup>
  </f7-app>
</template>

你可以在相应的部分中进一步阅读有关视图、导航条、工具栏、页面、面板和其他组件的信息。

初始化应用

现在我们有基本的模板，我们需要在（比如）my-app.js 中初始化我们的应用

改进此文档