快速创建H5项目脚手架工具

栏目: CSS · 发布时间: 5年前

快速创建H5项目脚手架工具

快速创建H5项目脚手架工具

X-BUILD 一套基于 Webpack (v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来。

H5场景开发

X-BUILD 是针对 H5 开发的一套自动化构建工具,致力于提升开发效率,减小开发难度。它可以让你在没有任何构建工具(例如 grunt 、 gulp 或 webpack 等工具)配置经验的情况下,帮你快速生成一个完整的前端工程,并可以打包代码和静态资源,使你的项目以最优异的性能上线。

:warning: 基础

有一定的 HTMLCSS 基础,了解 JavaScriptNPM命令行

如果以上这些都掌握的话,那我们继续吧~!:v:

如果你被这些问题困扰,请尝试X-BUILD帮你解决:

  • 如何快速的搭建自己前端 H5 项目(类似@vue/cli 的方式)?

  • 如何一套代码实现移动端自适应?

  • JavaScript使用不是很熟练,又想去做翻页效果怎么办?

  • 如何打包出性能优秀、兼用型高的代码?

  • 想使用 CSS 预处理器或 ES6 语法,又对前端工程不太了解,如何搭建自动化的开发环境?

  • 如何自动刷新(热加载)浏览器?如何在自己的手机中测试?

功能特性

Speciality Description
devServer 模块热替换(HMR - Hot Module Replacement) 可以显著加快开发速度。
自适应解决方案 px2rem (loader) + hotcss 实现多终端显示一致。
HTML 使用 Pug 模板引擎,风格与Stylus类似。
Css 支持sass、less、stylus样式预处理器,normalize重置样式,打包拆分单独的css文件。
JavaScript Webpack 解决模块化,通过Babel编译成现代浏览器可执行的JavaScript。
代码规范 使用 ESLint 避免低级错误和统一代码的风格。
静态资源服务 提供代码压缩、图片压缩、文件hash、base64处理等服务。

生态系统

Project Status Description
X-BUILD 基于Webpack的工程模板,CLI create时会被下载。
X-BUILD-CLI 脚手架工具,快速生成工程目录,并安装依赖。
X-FULLPAGE 适用于移动端的整屏滚动插件,支持动画触发。
X-LOAD 创建Loading效果、控制图片加载方式。
X-ANIMATE 屏幕滚动执行相应动画,支持动画组和生命周期回调。
X-TOUCH 使原生DOM支持轻触、长按和滑动事件。

讨论交流

QQ群

欢迎加入 X-BUILD QQ交流群,在这里可以互相交流前端问题。

群号: 374406559

提问 & BUG

请将BUG提交在不同项目的 github issues 里,或者加QQ:461229187讨论交流。

X-BUILD模板 | CLI工具 | X-FULLPAGE | X-LOAD | X-ANIMATE | X-TOUCH


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

PHP经典实例(第3版)

PHP经典实例(第3版)

David Sklar、Adam Trachtenberg / 苏金国、丁小峰 / 中国电力出版社 / 2015-7 / 128.00

想要掌握PHP编程技术?或者想要学习如何完成一个特定的任务?那么一定要先看看《PHP经典实例(第3版)》。本书介绍了专门为PHP 5.4和5.5修订的350个经典技巧,并提供了丰富的示例代码。特别是对生成动态Web内容的解决方案做了全面更新,从使用基本数据类型到查询数据库,从调用RESTful API到测试和保护网站安全都有涵盖。 各个技巧都提供了示例代码,可以免费使用,另外还讨论了如何解决......一起来看看 《PHP经典实例(第3版)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具