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后缀）没有 Framework7 组件（路由组件）功能，Gauge、饼图和区域图组件的核心API。它设计为与 Framework7-Vue/React/Svelte 库一起使用，您在那里使用 Vue/React/Svelte 组件。

轻量版仅适用于 ESM 导入。

样式

主 Framework7 样式位于根包文件夹中：

• framework7.css- 包含最少的（核心）Framework7 样式和最少的组件集。
• framework7-rtl.css- 相同，但用于从右到左布局。
• framework7-bundle.css- 包含 Framework7 核心版本的样式，并包含所有组件的样式。
• framework7-bundle-rtl.css- 相同，但用于从右到左布局。

脚本（UMD）

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

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

轻量版不以 UMD 格式提供。

组件

所有组件都位于components/文件夹中，并且必须与核心（非捆绑）版本一起使用。您可以在懒加载模块部分中的信息。

ES 模块

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

import Framework7 from 'framework7';

Framework7 具有模块化结构，并且默认情况下只导出核心 Framework7 和核心组件by default it exports only core Framework7 with core components.

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

// 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();

"轻量"模块也是可用的：

import Framework7 from 'framework7/lite';

ES 模块捆绑包

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

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

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

"轻量"捆绑模块也是可用的：

import Framework7 from 'framework7/lite-bundle';

ES 模块导出

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

{
  "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",
    ...
  }
}