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

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

快速创建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


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

查看所有标签

猜你喜欢:

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

The Haskell School of Music

The Haskell School of Music

Paul Hudak、Donya Quick / Cambridge University Press / 2018-10-4 / GBP 42.99

This book teaches functional programming through creative applications in music and sound synthesis. Readers will learn the Haskell programming language and explore numerous ways to create music and d......一起来看看 《The Haskell School of Music》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具