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 构建的。如果你在 app/项目中使用 Less 和 NPM，则你可以轻松地创建仅包含你需要组件的自定义 Framework7 样式表。

创建你自己的 framework7.less 文件

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