如何安装

使用 Framework7 来构建你的应用,是一件非常简单的事情。首先我们需要安装 Framework7。当然,你也可以跳过这一步,直接使用官方提供的项目模板进行构建项目,例如:starter app templates.

我们可以通过两种方式下载或安装 Framework7:

  • 从 GitHub 下载

    我们可以从 Framework7 GitHub repository 下载 Framework7 所需的文件。

  • 通过 NPM 安装

    我们也可以通过 NPM 安装 Framework7:

    $ npm install framework7
    

从下载好的压缩包里的目录 dist/cssdist/js 可以找到我们需要的所有文件

ES Module

这个特性使 Framework7 能够使用 Webpack 和 Rollup 进行构建

Framework7 可以作为一个 ES-next module 进行引用使用

import Framework7 from 'framework7';

Framework7 支持模块化结构 默认版本 Framework7 只包含其核心组件

当然,如果你有需要,完全可以自定义引入其他组件:

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/dist/components/searchbar/searchbar.js';
import Calendar from 'framework7/dist/components/calendar/calendar.js';
import Popup from 'framework7/dist/components/popup/popup.js';

// Install F7 Components using .use() method on class:
Framework7.use([Searchbar, Calendar, Popup]);

// Init app
var app = new Framework({/*...*/});

这种模块化结构,不仅使结构更加清晰,并且可以优化包及文件的大小。

ES Module Bundle

如果你需要引用 Framework7 的所有组件,我们可以通过以下的脚本来引用、安装所有组件:

// Import framework with all components
import Framework7 from 'framework7/dist/framework7.esm.bundle.js';

// Init app
var app = new Framework({/*...*/});

应用基本布局

至此,我们已经下载、安装好 Framework7了,现在让我们从 App Layout 开始创建应用吧。