初始化应用

现在你可以看到我们的HTML布局，其中链接了所需的CSS和JavaScript文件。现在我们应该初始化我们的应用（例如在my-app.js）访问：

var app = new Framework7();

在上面的示例中我们使用app变量，其中我们存储Framework7初始化的实例，以便将来轻松访问。它不必命名为app，它可以是任何你喜欢的名称。

这很简单。但Framework7还通过传递带有参数的对象来提供更多初始化的自定义选项：

var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

查看所有可用应用参数的列表，请查看应用 / 核心部分中的信息。

现在我们初始化了应用，我们需要初始化我们的视图 (<div class="view view-main">（在应用布局中）。视图基本上是应用路由器，负责导航：

var mainView = app.views.create('.view-main');

所以你最终的初始化代码在my-app.js可能如下所示：

var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

下一步是什么

好的，现在我们知道如何搭建和初始化应用。现在我们需要检查应用 / 核心组件，以了解更多关于其参数和方法，了解Router如何工作，了解更多关于视图, 页面以及其他组件。