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 元件 (路由器元件) 功能，也沒有量表、圓餅圖和折線圖元件的核心 API。其設計是與 Framework7-Vue/React/Svelte 函式庫搭配使用，您可以在其中使用 Vue/React/Svelte 元件。

精簡版僅適用於 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 的完整版本，以及其所有元件。

精簡版不適用於 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();

「精簡版」模組也可用

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