Framework7 自定义构建

自定义构建

Framework7 带有 Gulp 构建器，允许构建自定义库版本，您可以在其中仅包含所需的组件/模块。我们需要以下内容：

1. 下载并解压Framework7 GitHub 仓库到本地文件夹

2. 安装Node.js（如果未安装）

3. 通过在终端执行以下命令安装 Gulp（如果未安装）：

   npm install --global gulp

4. 现在，我们需要安装所需的依赖项。进入下载并解压的 Framework7 仓库文件夹，并在终端执行：

   npm install

5. 复制scripts/build-config.js文件到下载文件夹中的某个位置并重命名，比如为scripts/my-config.js
6. 打开此文件并删除您不需要的组件或修改颜色主题和包含的颜色：

   /* my-config.js */
   const config = {
     rtl: false, // change to true to generate RTL styles
   
     // remove any components you don't need
     components: [
       // Modals
       'dialog',
       'popup',
       'login-screen',
       'popover',
       'actions',
       'sheet',
       'toast',
   
       // Loaders
       'preloader',
       'progressbar',
   
       // List Components
       'sortable',
       'swipeout',
       'accordion',
       'contacts-list',
       'virtual-list',
       'list-index',
   
       // Timeline
       'timeline',
   
       // Tabs
       'tabs',
   
       // Panel
       'panel',
   
       // Card
       'card',
   
       // Chip
       'chip',
   
       // Form Components
       'form',
       'input',
       'checkbox',
       'radio',
       'toggle',
       'range',
       'stepper',
       'smart-select',
   
       // Grid
       'grid',
   
       // Pickers
       'calendar',
       'picker',
   
       // Page Components
       'infinite-scroll',
       'pull-to-refresh',
   
       // Data table
       'data-table',
   
       // FAB
       'fab',
   
       // Searchbar
       'searchbar',
   
       // Messages
       'messages',
       'messagebar',
   
       // Swiper
       'swiper',
   
       // Photo Browser
       'photo-browser',
   
       // Notifications
       'notification',
   
       // Autocomplete
       'autocomplete',
   
       // Tooltip
       'tooltip',
   
       // Gauge
       'gauge',
   
       // Skeleton
       'skeleton',
   
       // Color Picker
       'color-picker',
   
       // Tree View
       'treeview',
   
       // WYSIWYG Editor
       'text-editor',
   
       // Pie Chart
       'pie-chart',
   
       // Area Chart
       'area-chart',
   
       // Breadcrumbs
       'breadcrumbs',
   
       // Typography
       'typography',
     ],
     // include/exclude dark theme styles
     darkTheme: true,
     // include/exclude light theme styles
     lightTheme: true,
     // include/exclude themes
     themes: [
       'ios',
       'md',
     ],
   };
   
   module.exports = config;
   

7. 现在，我们已准备好构建 Framework7 的自定义版本。我们需要执行：

   npm run build-core:prod -- --config scripts/my-config.js --output path/to/output/folder

8. 这样就完成了。现在您应该会在指定的输出文件夹中看到新生成的 js 和 css 文件

ES 模块

如果您使用 Webpack 或 Rollup 等打包器，可以仅使用所需的 Framework7 JS 组件，而无需该构建过程，并且仅通过导入所需的组件：

// 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';

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

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

以下组件可用于导入（所有其他组件都是核心的一部分）：

Less.js

Framework7 风格是使用Less.js如果您在应用程序/项目中使用 Less 和 NPM，则可以轻松创建仅包含您需要的组件的自定义 Framework7 样式表。

创建您自己的framework7.less文件中指定 Framework7 的主颜色主题和所需颜色：

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

我们甚至可以进一步在自定义framework7.less文件中指定 Framework7 的主颜色主题和所需颜色：

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

// include/exclude themes
@includeIosTheme: true;
@includeMdTheme: true;

// include/exclude dark theme
@includeDarkTheme: true;
// include/exclude light theme
@includeLightTheme: true;

// Theme color
@themeColor: #007aff;

// Extra colors
@colors: {
  red: #ff3b30;
  green: #4cd964;
  blue: #2196f3;
  pink: #ff2d55;
  yellow: #ffcc00;
  orange: #ff9500;
  purple: #9c27b0;
  deeppurple: #673ab7;
  lightblue: #5ac8fa;
  teal: #009688;
  lime: #cddc39;
  deeporange: #ff6b22;
  gray: #8e8e93;
  white: #ffffff;
  black: #000000;
};

// change to true to generate RTL styles
@rtl: false;