Framework7 代码结构

Package

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

Lite Version

Framework7 "Lite" 版本 (files with -lite suffix) 不包含 Framework7 一些组件功能 (路由组件), Core APIs for Gauge, 饼状图 and 面积图表组件. 它主要设计用于 Framework7-Vue/React/Svelte 扩展框架，你可以使用他们自带功能.

Lite 版本只能用于 ESM imports .

Styles

Framework7主要样式位于根目录的结果:

• framework7.css - 包含最小（核心）Framework7样式以及最小的必需组件集合.
• framework7-rtl.css - 相同，但用于RTL（从右到左）布局.
• framework7-bundle.css - 包含Framework7核心版本的样式，并包括所有组件的样式。.
• framework7-bundle-rtl.css - 相同，但用于RTL（从右到左）布局.

Scripts (UMD)

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

• framework7.js - contains minimal (core) Framework7 version with minimal required set of components.
• framework7-bundle.js - contains whole Framework7 with all its components.

Lite 版本在 UMD 格式下不可用.

Components

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

ES Module

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

import Framework7 from 'framework7';

Framework7具有模块化结构 默认情况下仅导出核心Framework7和核心组件.

如果您需要其他组件，还必须额外导入它们:

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

// 导入其他组件
import Searchbar from 'framework7/components/searchbar/';
import Calendar from 'framework7/components/calendar/';
import Popup from 'framework7/components/popup/';

//导入组件样式
import 'framework7/components/searchbar/css';
import 'framework7/components/calendar/css';
import 'framework7/components/popup/css';

   // 使用.use()方法安装F7组件：
Framework7.use([Searchbar, Calendar, Popup]);

 // 初始化应用程序
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 Module Bundle

如果您需要将Framework7与所有组件一起包含在内，我们可以使用另一个已安装所有组件的脚本捆绑包

// 导入包含所有组件的框架
import Framework7 from 'framework7/bundle';

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

"Lite" bundle module is also available:

import Framework7 from 'framework7/lite-bundle';

ES Module Exports

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