Framework7 Custom Build

优质
小牛编辑
126浏览
2023-12-01

Since version 1.0.0 Framework7 comes with Gulp builder that allows to build custom library version where you may include only required components/modules. We need the following:

  1. 下载Framework7 GitHub repository,解压到本地目录

  2. 安装Node.js (如果没有安装的话)

  3. Install Gulp (if not installed) by executing the following command in terminal:

    $ npm install --global gulp
  4. 然后,我们需要安装需要的依赖,进入Framework7 repository解压的路径,在终端中执行如下命令:

    $ npm install
  5. 现在,我们做好了构建定制版本Framework7的准备工作。我们需要执行gulp custom命令,传递我们想要添加的组件/模块作为参数。例如,如果我们只想要手风琴(Accordion )和标签页(Tabs)的话:

    $ gulp custom -accordion,tabs
    注意,在逗号和组件名之间不应有空格

  6. 以上即为全部操作。现在,你应该可以看到custom/文件夹,它包含定制的JS和CSS文件,以及相应的压缩版本

可用的组件/模块

这里是你可以用来定制构建的核心组件列表:

accordion手风琴组件
searchbar搜索栏组件
messages包含消息消息栏组件
modals包含所有遮罩组件:模态框, 上弹框, 弹出框, 操作表登陆屏
swipeout滑动操作组件
sortable可排序列表组件
cardsCards component
smart-select智能选择组件
virtual-listVirtual List component
pull-to-refresh下拉刷新组件
infinite-scroll无限滚动组件
scroll-toolbarsHide Bars On Scroll component
tabsTabs component
fast-clicks这个库用来去除在移动端浏览器中300ms的点击延时。如果你想要使用第三方的快速点击库,你无需添加它
forms表单逻辑。包含表单存储, 表单数据Ajax表单提交
push-state添加浏览历史
swiper幻灯片 component
photo-browser图片浏览器组件。幻灯片也会被安装,因为图片浏览器需要它
notifications通知组件
pickerPicker component
calendarCalendar / Datepicker component

只有内核

如果你不添加任何组件,只需要执行 "gulp custom",而不添加任何参数:

$ gulp custom