优化前端开发流程与工作方法-提高质量和效率的小法宝-Uix Kit脚手架

这个产品维护已经有一年了(由于业务需求不同,目前没有做中文版,产品本身是针对国外网站),自己本身是做UI出生,开发只是业余爱好,仅仅作为平时工作的需要。杂七杂八会一些前后端开发。并非职业码农!

我是一个BBoy,也是一个爱到处旅行拍极限视频的冒险家!喜欢大自然,不喜欢繁华都市。

好啦,自我介绍简单就好!:)


Uix Kit! 是一个偏视觉交互的工具集合,数据交互的模块非常少,它基于常用的脚本库,帮助开发者快速完成一套完整的交互型网站。它不是一个框架,不是一个脚本库,它是一个兼容Bootstrap的快速建站HTML5套件,遵循W3C标准,包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格Footer、文字效果、徽章、表单等等常用的网站模块,并支持官方无限更新和扩展、优化,满足各类常用的、交互和动效级的Web前端开发需求。支持Gulp和Webpack开发模式。套件提供了规范的HTML结构和模块化的HTML,CSS,JS代码(默认),能够让开发者快速进入开发模式,自定义、修改或删除任意模块。


甚至,你可以把里面的所有模块删除,只是使用套件的脚手架,通过套件提供的自动化流程,优化你的工作效率和方式方法。

当我们做项目的时候,会使用一些优秀的模板,但是很难去个性化去定制,特别是很难将其模块化管理。

当我们做项目的时候,会使用到各种插件,但是由于插件众多,容易造成规范和结构的混乱。

当我们做项目的时候,重新编写一堆堆HTML,CSS,JAVASCRIPT代码,时间长了,效率低,质量低,甚至会厌倦它们,永无止境的工作和加班。

当我们做项目的时候,总是不能开心的让系统去执行自动化任务,不够科学,不够前卫,不够智能,我们也会渐渐对网页设计或前端开发产生一些低潮。




Uix Kit 3 快速建站-前端开发质量和效率的脚手架和工具套件

需求:

现在很多普通网站,已经可以通过在线的拖拽建站工具,智能建站系统快速完成,因此普通网站已经无需专门花很多金钱和时间去找一个开发者完成。Uix Kit工具箱是针对一些特殊效果的交互的网站,也可以用于比较个性化的定制网站的开发设计。


描述:

+  模块批量打包生成

+ 采用BEM命名,与其它框架和库互不冲突

+  简单的自定义CSS和JS核心文件,方便直接用其制作网站

+  很好的跨设备响应式支持

+  独立的组件文件夹,可任意删除和增加,开发环境中自动识别组件库并进行打包

+  支持中文和英文

+  兼容Bootstrap 4.x

+  提供常见的网页组件和布局

+  标准代码规范

+  W3C支持

+  Webpack通用脚手架



推荐使用方法:

具体的使用方法请参考github文档或者演示视频

1.从github或者npm上直接下载https://github.com/xizon/uix-kit

2.配置你电脑的Node.js环境

3.下载完资源后,进入到uix-kit目录下,运行npm run build, 进入开发模式

4.直接通过修改src/ 文件夹内的模块组件的HTML,JS,SCSS文件,来实现前端开发,所有文件将会自动打包生成到examples/ 文件夹中。

5.当你需要配置脚手架和网站基础信息和结构的时候,请直接编辑package.json文件。

不建议跳过开发模式直接修改examples/ 文件夹里的文件,因为代码量非常大,很难去维护和定制各种动画、交互、结构。


结构:



小提示:

这个工具套件并不是强制谁去使用它的默认样式和交互效果,而是提供了一个便于利用的自动化脚手架,通过Gulp和Webpack来规范你的开发流程,提高代码的质量和编写效率,提高后期维护的便利性。这是一种工作方法,而不是现成的模板(当然也可以直接使用examples/目录里的项目文件,作为快速建站的模板),Uix Kit的价值,在于快速、简单的模块分离,自动化打包和生成目录,并提供了丰富的默认常用前端代码应用。

如果它对你有帮助,可以关注Github项目主页,项目会不断更新升级优化:)详细使用方法请参考github主页 https://github.com/xizon/uix-kit


文章同步发布于Chuckie Chang中文博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,071评论 25 707
  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,193评论 0 44
  • 只有在梦里能看清你的脸 生活里全是你的碎片 我不捡 回忆又太片面 辨认你 成为一场没有观众的表演 ——《梦辨已忘言...
    段童阅读 106评论 0 0
  • 其他的教程往往从语法开始,而我们直接开始爬虫,语法等知识边做边学。这第0篇我们简单介绍下爬虫和编程工具。 爬虫是什...
    v1coder阅读 702评论 0 0
  • 没有一种幸福不与虚伪同源 没有一种痛苦不与真实相抵 没有一种柔情不与凶蛮同谋 没有一种掩饰不与暴露癖相亲 没有一颗...
    暗烨无殇阅读 169评论 0 1