Framework7 包结构

包

Framework7 核心库包包含以下导出

framework7/
    components/
        accordion/
            accordion-ios.less
            accordion-md.less
            accordion-rtl.css
            accordion-vars.less
            accordion.css
            accordion.d.ts
            accordion.js
            accordion.less
        ...
    less/
    modules/
    framework7-bundle-rtl.css
    framework7-bundle-rtl.min.css
    framework7-bundle.css
    framework7-bundle.esm.js
    framework7-bundle.js
    framework7-bundle.less
    framework7-bundle.min.css
    framework7-bundle.min.js
    framework7-lite-bundle.esm.js
    framework7-lite.esm.js
    framework7-rtl.css
    framework7-rtl.min.css
    framework7-types.d.ts
    framework7.css
    framework7.d.ts
    framework7.esm.js
    framework7.js
    framework7.less
    framework7.min.css
    framework7.min.js

精简版

Framework7 "Lite" 版本（文件名包含 -lite 后缀）不包含 Framework7 组件（路由组件）功能、仪表盘、饼图和面积图组件的核心 API。它设计用于 Framework7-Vue/React/Svelte 库，在这些库中您可以使用 Vue/React/Svelte 组件来代替。

Lite 版本仅适用于 ESM 导入。

样式

主要的 Framework7 样式位于根软件包文件夹中

• framework7.css - 包含最小的（核心）Framework7 样式和最小的必要组件集。
• framework7-rtl.css - 与上述相同，但适用于 RTL 布局。
• framework7-bundle.css - 包含 Framework7 核心版本的样式，并包含所有组件的样式。
• framework7-bundle-rtl.css - 与上述相同，但适用于 RTL 布局。

脚本 (UMD)

根文件夹中有所谓的 UMD JavaScript 文件，旨在直接在浏览器中使用（例如，使用 <script src="...">）

• framework7.js - 包含最小的（核心）Framework7 版本和最小的必要组件集。
• framework7-bundle.js - 包含完整的 Framework7 及其所有组件。

Lite 版本不提供 UMD 格式。

组件

所有组件都位于 components/ 文件夹中，需要与核心（非捆绑）版本一起使用。您可以在延迟模块部分了解更多关于如何使用它们的信息。

ES 模块

Framework7 也可以作为 ES-next 模块导入

import Framework7 from 'framework7';

Framework7 具有模块化结构，并且默认情况下，它只导出带有核心组件的核心 Framework7。

如果您需要额外的组件，则必须另外包含它们

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

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

// Import components styles
import 'framework7/components/searchbar/css';
import 'framework7/components/calendar/css';
import 'framework7/components/popup/css';

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

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

这种模块化结构提供了最佳的摇树优化结果和包大小优化。

除了 default 导出之外，它还为 Dom7、getDevice、createStore、utils 和 getSupport 帮助器提供了命名导出

import Framework7, { getDevice } from 'framework7';

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

var device = getDevice();

还提供“Lite”模块

import Framework7 from 'framework7/lite';

ES 模块捆绑包

如果您需要包含所有组件的 Framework7，我们可以包含另一个安装了所有组件的脚本捆绑包

// Import framework with all components
import Framework7 from 'framework7/bundle';

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

还提供“Lite”捆绑模块

import Framework7 from 'framework7/lite-bundle';

ES 模块导出

Framework Core 包是一个纯 ESM 包，它在 package.json 中具有以下 exports 字段

{
  "exports": {
    ".": "./framework7.esm.js",
    "./core": "./framework7.esm.js",
    "./bundle": "./framework7-bundle.esm.js",
    "./lite": "./framework7-lite.esm.js",
    "./lite/bundle": "./framework7-lite-bundle.esm.js",
    "./lite-bundle": "./framework7-lite-bundle.esm.js",
    "./less": "./framework7.less",
    "./css": "./framework7.css",
    "./css/rtl": "./framework7-rtl.css",
    "./css/bundle": "./framework7-bundle.css",
    "./css/bundle/rtl": "./framework7-bundle-rtl.css",
    "./types": "./framework7-types.d.ts",
    "./components/dialog": "./components/dialog/dialog.js",
    "./components/dialog/less": "./components/dialog/dialog.less",
    "./components/dialog/css": "./components/dialog/dialog.css",
    "./components/dialog/css/rtl": "./components/dialog/dialog-rtl.css",
    ...
  }
}