流行前端框架_当前最流行的三大前端框架 - CSDN
精华内容
参与话题
  • 前端流行的十大框架

    千次阅读 2018-09-02 22:45:48
    十大前端开发框架 原文出处http://blog.jobbole.com/41950/ 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部分着重讲的是Bootstrap家族框架,第二节将会跟大家分享...

    十大前端开发框架

    原文出处http://blog.jobbole.com/41950/

    编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部分着重讲的是Bootstrap家族框架,第二节将会跟大家分享更多其他的框架。

    随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得越来越复杂。

    十年前,一切都还简单得多。那个时候,大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道,并通过添加几个浏览器的hack,来兼容诡异的旧版本 IE 浏览器。时至今日,随着过去五六年间手持电子设备的突飞猛进,一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷,电子阅读器,以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。

    可以预见,在不远的将来,相对于使用台式机,越来越多的人会使用移动设备来访问互联网。事实上,已经有相当数量的一部分人只通过智能手机上网。这意味着,我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品,这至关重要。在撰写本文的时候,尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果,但是用于实现这一目标的技术以及工具正在变得越来越好。

    在不知道浏览设备屏幕大小的时候,最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备(如智能手机以及平板电脑)上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸,然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的,但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便,链接太小难以点击,缩放以及滚动的操作多多少少会让人在阅读的时候分心。

    响应式网页设计利用同样的HTML文档来适配所有的终端设备,响应式网页设计会根据设备屏幕的大小加载不同的样式,从而在不同的终端设备上呈现最优的网页布局。举个例子,当你在大屏幕桌面浏览器中查看一个网页的时候,网页的内容可能是分为很多列的,并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面,你会发现页面的内容呈现在同一列中,并且导航按钮足够大,点击起来很方便。你可以在Media Queries这个网站上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例,然后改变浏览器窗口的大小,你会看到网页的布局会根据窗口大小相应变化。

    到目前为止,我们可以看出,响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢?我们每个人都需要成为web大师才能驾驭这门技术么?或者是利用我们已经掌握的web基本知识就已经足够了?目前有什么工具可以帮到我们么?

    这时候前端开发框架华丽登场。响应式网页设计实现起来并不困难,但是要让它在所有的目标设备上都正常运作会有一点小棘手。框架可以让这一工作变得简单。利用框架,你可以花最少的力气创建响应式且符合标准的网站,一切都很简单并且具有一致性。使用框架有很多好处,比如说简单快速,以及在不同的设备之间的一致性等等。框架最大的优势就是简单易用,即使只掌握少量的web知识,你也可以毫无障碍的使用它们。

    简而言之,如果你认真对待目前的web开发工作,那么使用框架进行开发就不是可选项而是必须要做的事情。你的站点必须高度灵活以适应不同的浏览器,平板,智能手机以及其他各种各样的手持设备。

    一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了大家的使用便利,下文列举了目前最强大应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。

     

    1. Bootstrap

    Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。

    Bootstrap是用动态语言LESS写的,主要包括四部分的内容:

    • 脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。
    • 基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。
    • 组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。
    • JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。

    Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。

    • jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
    • jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。
    • Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。
    • StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
    • BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
    • Bootswatch —— 提供大量免费的Bootstrap主题。
    • Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
    • LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。

     

    2. Fbootstrapp

    Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。

     

    3. BootMetro

    BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

     

    4. Kickstrap

    Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

    App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。

    选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。

    附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。

     

    5. Foundation

    Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。

    Foundation拥有一套12列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的CSS组件,例如操作面板(panels),价格表(price tables),进度条(progress bars),表格(tables)以及可以适应不同设备的可伸缩视频(flex video)。与此同时,Foundation还包括了很多的JavaScript插件,如下拉菜单(dropdowns),joyride(网站功能引导插件),magellan(网站固定导航插件),orbit(支持触摸的响应式图片轮播插件),reveal(弹出框插件),sections(强大的tab插件)以及tooltips(工具提示)等。

    Foundation框架还提供了很多有用的扩展。

    • 模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。
    • HTML模板 —— HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。
    • 图标字体(Icon Fonts) —— 包含自定义图标的一种网页字体。
    • SVG 社交网络图标(Social Icons)—— 一组不依赖分辨率的社交网络图标(可缩放矢量图标)。
    • 响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。
    • 关闭帆布布局(Off-Canvas Layouts)—— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。

    如你所见,对于web开发者以及设计师来说,Foundation就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

     

    6. GroundworkCSS

    GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

    GroundworkCSS拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于768或者480像素时,页面中原本并列排版的表格列(grid column)会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本(ResponsiveText)插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。

    GroundworkCSS包含了大量的UI组件,如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles(一套替代radio按钮以及其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一款强大的,响应式的内容滑块)以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。

    你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。

    GroundworkCSS的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。

     

    7. Gumby

    Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

    它的流式-固定布局(fluid-fixed layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。

    Gumby提供了一个功能丰富的UI工具包,包括按钮,表单,移动端导航,tabs,跳转链接(skip links),拨动开关(toggles and switches,可以方便快捷地切换元素的class,而不需要进行额外的js操作),抽屉功能(drawers),响应式图片以及retina图片等等。为了紧跟最近的设计潮流,Gumby的UI元素中还包括了Metro风格的扁平化设计,你也可以用Pretty风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的Entypo图标,你可以在自己的web项目中尽情使用。

    Gumby有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。

     

    8. HTML KickStart

    HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。

    这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的web组件比如JavaScript的幻灯片功能,tabs,面包屑导航,包含子菜单的菜单以及工具提示等等。

    你可以使用99Lime UIKIT提供的UI组件来搭建你的产品线框图。

     

    9. IVORY

    IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

    当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时,IVORY是你最好的选择。

     

    10.Kube

    最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

    Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局,还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制,那么你可以下载开发者版本(developer version),这个版本包括了LESS文件(包括各种变量,mixins以及模块)。

     

    总结

    我希望看过本文之后,当你为新项目选择框架时,能够对各种各样的框架有更好的认识。在文章中,我尝试着列出了我所知道的目前应用最广泛,功能最全面,结构最优的一些前端开发框架。不过如你所知,大千世界,瞬息万变,因此,如果你知道本文中没有列出的其他的优秀开发框架,欢迎你在评论中与我们分享,这样会使本文更加有帮助,谢谢。

    展开全文
  • 流行的5个前端框架对比

    千次阅读 2018-10-06 11:47:56
    如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是...

    如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。

    本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件。

    本文依据各个框架的GitHub流行度来顺序介绍。

    Bootstrap

    Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛弃。

    • 创作者: Mark Otto 和 Jacob Thornton.
    • 发行: 2011
    • 当前版本: 3.3.7
    • 人气: GitHub上有111,000颗星
    • 说明: “Bootstrap是最流行的HTML,CSS和JavaScript框架,用于在网络上开发响应式、移动的Web项目。
    • 核心概念/原则: RWD和移动端优先。
    • 框架大小: 154 KB
    • 预处理器: LessSass
    • 响应式布局:是
    • 模块化:是
    • 启动模板/布局:是
    • 图标集: Glyphicons Halflings设置
    • 附加/附件:无捆绑,许多第三方插件可用。
    • 独特组件: Jumbotron
    • 文档资源:良好
    • 自定制:基本GUI定制器。但是你需要手动输入颜色值,因为没有颜色选择器可用。
    • 浏览器支持: Firefox,Chrome,Safari,IE8 +(您需要IE8的Respond.js
    • 许可证: MIT

    Bootstrap说明

    Bootstrap的广泛流行是它的优势所在。在技术上,它不一定比列表中的其它框架更好,但它提供了比其它四个框架更多的资源(文章和教程、第三方插件和扩展、主题构建器等)。简而言之,Bootstrap 无处不在,这是人们继续选择的主要原因。

     

    Foundation

    Foundation是排在第二名的框架。ZURB这样坚实的公司一直支持着Foundation,所以这个框架有强大的基础。Foundation现已用于许多大型网站,包括Facebook,Mozilla,Ebay,Yahoo!和国家地理等。

    • 创作者: ZURB
    • 发行: 2011
    • 当前版本: 6.3.1
    • 人气: GitHub上有25,400颗星
    • 说明: “世界上最先进的响应式前端框架”
    • 核心概念/原则: RWD,移动端优先,语义。
    • 框架大小: 197.5 KB
    • 预处理器: Sass
    • 响应式布局:是
    • 模块化:是
    • 启动模板/布局:是
    • 图标集: 基础图标字体
    • 额外/附加组件:是
    • 独特的组件: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
    • 文档资源:良好,还有许多额外资源。
    • 自定制:基本的GUI定制程序,类似于Bootstrap定制工具。
    • 浏览器支持: Chrome,Firefox,Safari,IE9 +; iOS,Android,Windows Phone 7+
    • 许可证:MIT

    Foundation说明

    Foundation是一个真正的专业框架,提供业务支持、培训和咨询。它还提供了许多资源来帮助你更快更轻松地学习和使用该框架。

     

    Semantic UI

    Semantic UI是一个语义化设计的前端开源框架。它利用自然语言原理,从而使代码更加可读和可理解。

    • 创作者: Jack Lukic
    • 发行: 2013
    • 当前版本: 2.2
    • 人气: GitHub上有34,762颗星
    • 说明: “基于自然语言原则的UI组件框架”。
    • 核心概念/原则:Semantic, tag ambivalence, responsive。
    • 框架大小: 806 KB
    • 预处理器:少
    • 响应式布局:是
    • 模块化:是
    • 启动模板/布局:是,并提供了一些基本的入门模板
    • 图标集: Font Awesome
    • 额外/附加组件:否
    • 独特的部件:Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
    • 文档资源:非常好,Semantic提供了一个非常有组织的文档,另外还有一个单独的网站提供入门指南、自定义和创建主题。
    • 自定义:没有GUI定制器,只有手动定制。
    • 浏览器支持: Firefox,Chrome,Safari,IE10 +(仅IE9浏览器前缀),Android 4,Blackberry 10
    • 许可证:MIT

    Semantic UI说明

    Semantic是这里所讨论的所有框架中,最具创新性和全功能的框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。

    Pure

    Pure是一种轻量级的模块化框架,采用纯CSS编写,具有可根据需要一起使用或单独使用的组件。

    • 创作者:雅虎
    • 发行: 2013
    • 当前版本: 0.6.2
    • 流行度: GitHub上有16,637颗星
    • 说明: “一套小而灵活的CSS模块,能够在每个Web项目中使用。”
    • 核心概念/原则: SMACSS,极简主义。
    • 框架大小: 16 KB
    • 预处理:无
    • 响应式布局:是
    • 模块化:是
    • 启动模板/布局:是
    • 图标集:无。可以改用Font Awesome。
    • 额外/附加组件:无
    • 独特组件:无
    • 文档资源:很好
    • 自定义:基本GUI皮肤生成器
    • 浏览器支持:最新版本的Firefox,Chrome,Safari; IE7 +; iOS 6.x,7.x; Android 4.x
    • 许可证: Yahoo! Inc. BSD

    Pure说明

    Pure为你的项目提供了一个干净的开始,只提供基本框架。对于不需要全功能框架但仅包含在其工作中的特定组件的人来说,pures是一个理想的选择。

     

    UIkit

    UIkit是一个易于使用和自定义的组件的简洁集合。虽然它不像其它框架那样受欢迎,但它提供了相同的功能和质量。

    • 创造者: YOOtheme
    • 发行: 2013
    • 当前版本: 3.0.0
    • 人气:GitHub GitHub上有9,422颗星
    • 说明: “用于开发快速而强大的Web界面的轻量级和模块化的前端框架”。
    • 核心概念/原则: RWD,移动端优先
    • 框架大小: 326.9 KB(如果包含uikit-icons.min.js与SVG图标相关的功能,则为384.4 KB )
    • 预处理器:少,Sass
    • 响应式布局:是
    • 模块化:是
    • 启动模板/布局:是
    • 图标集: UIkit自带SVG图标系统和类库,其中包含越来越多的大纲图标。
    • 额外/附加组件:是
    • 独特的组件:Article, Flex, Cover, HTML Editor
    • 文件:好
    • 自定义:高级GUI定制程序仅在版本2(以前的版本)中可用
    • 浏览器支持: Chrome,Firefox,Safari,IE9 +
    • 许可证:MIT

    UIkit说明

    UIkit成功应用在许多WordPress主题中。它提供了灵活和强大的手动定制机制(以前版本的框架还提供了高级GUI定制程序)。

     

    什么是最适合你的框架?

    在选择框架时,可以从以下几个方面考虑:

    • 所选的框架有足够的人气吗?更多的人气意味着更多的人参与项目,也意味着有更多的教程和社区文章、更多的实例和网站、更多的第三方扩展、更好的相关的Web产品可与其集成。受欢迎程度也意味着框架更具前瞻性,因为具有更大社区的框架不太可能被抛弃。
    • 框架是否正在积极发展?一个好的框架需要不断地使用最新的web技术,特别是在移动端方面。
    • 框架是否达到成熟?如果一个特定的框架在现实项目中还没有被使用和测试,那么将其用于你的专业项目,可能不是一个明智的选择。
    • 框架是否提供了良好的文档?为了方便学习过程,总是需要良好的文档。
    • 框架的特异性是什么?这里的要点是,与具有高级别特异性的框架相比,更通用的框架更容易使用。在大多数情况下,最好选择一个应用最小样式的框架,因为它更容易自定义。与重写现有的CSS规则相比,添加新的CSS规则是一个更方便有效的做法。

    如果你还不确定使用哪个框架,那么可以采用混合搭配的方式。当某个特定的框架不能满足你的需求时,可以混合使用两个或多个项目的组件。

    最后值得一提的是,现在Flexbox和Grid Layout在主流浏览器的最新版本中得到很好的支持,比以往任何时候都更容易构建复杂的布局。这可能会鼓励更多的开发人员放弃前端框架,从头开始编写他们自己想要的布局。

    展开全文
  • 2019年几大主流的前端框架(UI/JS)框架

    万次阅读 多人点赞 2019-04-15 17:48:37
    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,...

    如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。

    要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念:

    HTML负责结构,网页想要表达的内容由html书写。

    CSS负责样式,网页的美与丑由它来控制

    JS负责交互,用户和网页产生的互动由它来控制。

    web前端发展至今,演变出了无数的库和框架;说到库第一时间想到的是不是jquery?在小编刚接触库的时候也是从jQuery开始的;今天我们就来说说前端发展到现在都有哪些好用的库框架。

    2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造。这一年中有很多热门的前端开发框架,下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。

    在这互联网飞速发展的信息时代,技术的更新迭代也在加快。目前看来,火了十几年的Java技术现在仍然是棵常青树。回想两年前初来咋到,也是想好好当一名java程序员,五年计划都行想好了,最后还是阴差阳错搞了前端。前端目前来看还是非常火的,随着IT技术的百花齐放,新的前端框架不断推出,但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品,产品又在不同程度的推进着技术的演进。Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在不同业务场景下的角色互换。而随着Node.js的出现语言的角色也在发生着转变,js扮演了越来越重要的角色。也就有了茶余饭后也把了解到的知识整理一下。

    前端UI框架组件库:

    说到前端框架我第一印象中想起React、Vue和Angular,不知道你是否与我一样想到这些,现在常用的有:Bootstrap、jQuery UI、BootMetro、AUI常用的还有很多、就不一一跟大家举例出来了,因为很多朋友认为在不同项目开发中用到的前端框架不一样,其实也有一款可以适用于多种项目开发的前端框架,只是没发现。

    用前端框架开发项目的原因?

    这个应该是最好解决的问题,首先就是减少造轮子的想法,能够快速的开发一款web应用对于公司来说都是非常愿意开到的,在时间和成本之间就能够节约很多的时间,这是其中一点,另外一点就是使用前端框架的组件功能,只要组件功能强大,什么样的项目都能够开发(前提是:要熟悉前端框架的功能!),时间成本问题就能够轻松解决。

    没有设计师也能做出精美页面效果的前端框架

    虽然市场中有很多的前端框架,但部分UI框架是属于组件库,然而QUICK UI跟当下流行的三大底层框架React、Vue和Angular不同,QUICK UI提供了一整套前端解决方案,包括前后端分离的开发框架、100多种功能强大的UI控件、几十套精美的皮肤模板和近16万字的开发文档,满足你所以开发项目都不是问题。

    前端框架库:

    1.Node.Js

    地址:http://www.runoob.com/nodejs/nodejs-tutorial.html (中文网)
    描述:Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。
      Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

      简单的说 node.js 就是运行在服务端的 JavaScript。

      Node.js 是一个基于Chrome javascript 运行时建立的一个平台。

      Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

    用途:
      1. RESTful API(目前比较流行的接口开发风格)

      这是NodeJS最理想的应用场景,可以处理数万条连接,本身没有太多的逻辑,只需要请求API,组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的API需求。

      2. 统一Web应用的UI层

      目前MVC的架构,在某种意义上来说,Web开发有两个UI层,一个是在浏览器里面我们最终看到的,另一个在server端,负责生成和拼接页面。

    不讨论这种架构是好是坏,但是有另外一种实践,面向服务的架构,更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用,就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的,他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

      3. 大量Ajax请求的应用

    例如个性化应用,每个用户看到的页面都不一样,缓存失效,需要在页面加载的时候发起Ajax请求,NodeJS能响应大量的并发请求。  总而言之,NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

     

    2.angular.Js(比较厉害,github排名也比较高)

    地址:http://www.runoob.com/angularjs/angularjs-tutorial.html (中文网)
    描述:AngularJS[1]  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
    用途:通过描述我们应该就能很好的明白AngularJS的真实用途了,MVVM,模块化,自动化双向数据绑定等等。除了简单的dom操作外,更能体现Js编程的强大。当然应用应该视场合而定。
    它的出现比较早,也是曾经比较流行的前端js框架,但是今年来随着reactJS与VueJS的出现,它的热度在慢慢降低。
     

    3.JQuery Mobile

    地址:http://www.w3school.com.cn/jquerymobile/    (中文网)
    描述:Query Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
    用途:jQuery Mobile 是创建移动 web 应用程序的框架。
          jQuery Mobile 适用于所有流行的智能手机和平板电脑。

          jquery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

     

    4.requirejs

    地址:http://www.requirejs.cn/
    描述:RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
    RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录。

    用途:模块化动态加载。
     

    5.Vue.js(目前市场上的主流)

    地址:http://cn.vuejs.org/
    描述:Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架,Vue.js 更容易上手。
    目前市场上比较流行的前后端分离的开发模式,大多前端都是vueJS做的,具体的优点请大家看官方文档。
     

    6.backbone.js

    地址:http://www.css88.com/doc/backbone/
    描述:Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序。
     

    7.React.js(gihub排名仅次于vue.js)

    地址:http://reactjs.cn/react/docs/why-react.html
    描述:React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。

    8.Amaze UI

    Amaze UI是轻量级的前端应用框架,是国内比较流行的框架,比较适用于移动端响应式开发框架,可以按照项目要求生成专属的UI框架库进行使用,组件非常丰富,可以构建出漂亮的web页面。

    官网地址:http://amazeui.org/

    三、可视化组件

    1.Echarts

    地址:http://echarts.baidu.com/
    描述:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
     

    2.tableau(收费)

    地址:http://www.yuandingit.com/special/tableau/index.html
    描述:Tableau 是桌面系统中最简单的商业智能工具软件,Tableau 没有强迫用户编写自定义代码,新的控制台也可完全自定义配置。在控制台上,不仅能够监测信息,而且还提供完整的分析能力。Tableau控制台灵活,具有高度的动态性。
     

    四、前端构建工具

    1.gulp

    地址:http://www.gulpjs.com.cn/
    描述:易于使用
          通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

          构建快速

          利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

          插件高质

          Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

          易于学习

          通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

    2、ES or webPackage

    1.Bootstrap中文网

    先分享下,如果有想一起学习web前端,HTML5及JavaScript的可以来一下我的前端群733581373,好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的炫酷特效,及前端直播课程学习

    Bootstrap,让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件,还有强大的支持十几的JavaScript、jQuery插件以及组件定制等。

    Bootstrap中文网地址:http://www.bootcss.com/

    2. Layui

    layer是一款口碑极佳的web弹层组件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。layui 首个版本发布于2016年秋,她区别于那些基于 MVVM 底层的 UI 框架,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

    Layui官网地址:https://www.layui.com/

    3.ElementUI

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI 。适合于Vue的UI框架;

    官网地址:http://element-cn.eleme.io/#/zh-CN

    4.Mint UI

    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

    官网地址:http://mint-ui.github.io/

    5.angular

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

    官网地址:http://www.angularjs.net.cn/

    6.React

    React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

    官网地址:http://react-china.org/

    7.vue.js

    近几年最火的前端框架当属Vue.js了,Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人--尤雨溪
     

    几款常用的高质量web前端框架

    Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析。都是个人意见,仁者见仁智者见智。

    QUICK UI

    QUICK UI是一套完整的企业级web前端开发解决方案,由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量,提高开发效率,快速构建功能强大、美观、兼容的web应用系统。

    QUICK UI优势:

    ①功能最为强大

    QUICKUI经历了7年的迭代更新,不断从客户的各种业务中对组件的需求进行归纳和抽离,从而打造新的组件和功能。现在最新的4.0版本框架包含了一百多种组件,一千多个应用场景示例。可以说在前端框架领域中,QUICKUI拥有功能最强大组件库。

    ②运行最为稳定

      很多其他的第三方UI控件在简单场合使用OK,到了复杂的场景中就会出现很多问题,这种现象很常见,因为在组件设计时无法预料到所有的应用场合。而QUICKUI在7年间经历了数千个项目实际检验,在各种复杂场景都应用过,并根据客户的反馈不断完善和调整。目前的第四代可以说是最稳定、最完美的版本。

    ③丰富精美的界面皮肤

      跟其他web前端框架仅仅是一套组件库不同,QUICKUI是一整套前端解决方案,拥有丰富的外观界面解决方案。采用现今流行的扁平化设计理念,推出了包括登录、响应式web、工作桌面、地图类、门户风格、大屏展示风格等等几百套制作精美、用户体验优秀的界面。这些界面是以QUICKUI皮肤包的形式发布,使用和更换都非常方便。

    ④事无巨细的开发文档

    QUICKUI拥有16万字+的开发文档,框架和组件的每一个功能点都有详细的讲解和代码示例,用于开发过程中随时查阅。除了框架机制讲解和组件使用教程,文档还涉及web前端开发的很多知识。仔细阅读并结合框架使用的话,你很快就能成为web开发的高手。

    ⑤上手开发非常容易

    QUICKUI采用组件化思想来构建组件,一个组件就是一两句html的标签,使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来,很大程度减少前台编码的出错率;保留了HTML的布局方式,从而快速进行页面布局。对开发者前台技术要求也非常低,只需要了解html语法和一些简单的JS即可,从而把更多精力放在业务功能的实现上,极大地提高开发效率。

    ⑥浏览器兼容性非常好

    QUICKUI4.0使用了很多HTML5,CSS3技术用于提高表现力和用户体验,这些新的特性在现代浏览器中会有很好的效果。但是,国内依然有大量的用户在使用IE7、IE8等旧时代的浏览器,为照顾这部分用户,框架采用了渐进式思想,确保低版本浏览器也能正常使用。所以,QUICKUI兼容IE7以上所有主流浏览器。

    flex

     

    Apache基金会今天发布了Flex4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。

      需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex4.8也不是一个正式的Apache版本。

    Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。

     

      从Macromedia卖给Adobe,然后又捐给apache,不知道搞什么名堂。不过还好没有经过大幅重构,否则就真的是悲哀了!

     

    extjs

     

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。

      功能丰富,无人能出其右。

      无论是界面之美,还是功能之强,ext的表格控件都高居榜首。

      华丽的界面,灵活的功能,还有开发工具都是配套的,但有个最大的问题,用就得花钱!

     

    easyui

     

    easyui帮助你构建你的web应用更加容易。

      它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。

      但是她有一个最大的问题就是代码只能找到以前的开源的版本,到了1.2以后的版本源代码都是经过混淆的,如果遇到问题修改起来会非常麻烦!不过一个比较大的优势是开源免费,并且界面做的还说的过去!

     

    jQueryUI

     

    jQueryUI是一套jQuery的页面UI插件,包含很多种常用的页面空间,例如Tabs(如本站首页右上角部分)、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。  功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!

     

    MiniUI

     

      又一个基于jquery的框架,开发的界面功能都很丰富。

    jQueryMiniUI–快速开发WebUI。

      它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。

      使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。

     

      界面做的挺不错,功能也挺丰富,但是有两个比较大的问题,一个是收费,一个是没有源码,说白了,不开源!基于这个开发如果想对功能做扩展就需要找他们的团队进行升级!

    DWZ

    DWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.

     

      设计目标是简单实用,快速开发,降低ajax开发成本。

      欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.共同推进国内整体ajax开发水平。

      毕竟是国产的,支持一下,而且源码完全公开,可以选择一下!不过性能怎么样不敢确定!

    YUI

    Yahoo!UILibrary (YUI)是一个开放源代码的JavaScript函数库,为了能建立一个高互动的网页,它采用了AJAX,DHTML和DOM等程式码技术。它也包含了许多CSS资源。使用授权为 BSD许可证,基本上没怎么研究过!YUICompressor倒是挺出名的,这套UI库不知道应用的情况怎么样!

     

    Sencha

    Sencha是由ExtJS、jQTouch以及Raphael三个项目合并而成的一个新项目。

     

      大公司的框架,并且是几样库的强强联合,值得推荐!

    OperaMasks-UI

    OperaMasks-UI是OperaMasks团队2011下半年打造的一款轻量级前端JS组件库,旨在提供一款学习曲线低、定制性灵活、样式统一,且多浏览器支持、覆盖企业业务场景的前端JavaScriptUI组件库。目前,该团队已将这一产品以LGPL开源协议开放给社区。

     

      文档丰富,功能齐全,而且很容易使用和开发!而且是国产的哟!

     

      以上排序是整理时的排序,一起整理分析一下,下次用的时候就不用到处找了,我想同样的问题应该也存在在很多程序员身上,任何一款UI框架,只要能够容易入手就行。 

    展开全文
  • 目前流行前端几大UI框架排行榜

    万次阅读 2019-06-26 13:37:29
    前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架。 一.Mint UI 流行指数:★★★★ Mint UI是 饿了么团队开发...

    在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架。

     

    一.Mint UI

     

    流行指数:★★★★

    Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。

    官网:https://mint-ui.github.io/#!/zh-cn

    Github:https://github.com/ElemeFE/mint-ui/

     

    二.WeUI

     

    流行指数:★★★

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

    官网地址:https://weui.io/

    Github:https://github.com/weui/weui.git

     

    三.cube-ui

     

    流行指数:★★★★★

    cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

    官网地址:https://didi.github.io/cube-ui/#/zh-CN

    Github:https://github.com/didi/cube-ui/

     

    四.iView UI

     

    流行指数:★★★★★★

    iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间。

    官网地址:https://www.iviewui.com

    Github:https://github.com/TalkingData/iview-weapp

     

    五.layui

     

    流行指数:★★★★★★★

    layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

    官网地址:https://www.layui.com

    Github:https://github.com/sentsin/layui/

     

    六. ElementUI

     

    流行指数:★★★★★★★★

    Element是饿了么前端开源维护的Vue UI组件库,组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。 主要用于开发PC端的页面,是一个质量比较高的Vue UI组件库。

    官网地址:http://element-cn.eleme.io/#/zh-CN

    Github:https://github.com/ElementUI/element-starter

     

    七.at-ui

     

    流行指数:★★★★★★★★★

    at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程,CSS 样式独立,即使采用不同的框架实现都能保持统一的 UI 风格。

    官网:https://at-ui.github.io/at-ui/#/zh

    Github:https://github.com/at-ui/at-ui/issues

     

    八.amaze UI

     

    流行指数:★★★★★★★★★★

    Amaze UI 是一个移动优先的跨屏前端框架。提供基础样式,网格,表格、表单、按钮及常用组件样式。是一个轻量级(所有 CSS 和 JS gzip 后 100 kB 左右)、 Mobile first 的前端框架

    官网地址:http://amazeui.org/

    Github:https://github.com/zordius/lightncandy

     

    九.vant UI

     

    流行指数:★★★★★★★★★★★

    vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。

    官网地址:https://youzan.github.io/vant/#/zh-CN/intro

    Github:https://github.com/youzan/vant

     

    十.ionic

    流行指数:★★★★★★★★★★★

    Ionic既是一个CSS框架也是一个Javascript UI库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

     

    展开全文
  • 当前比较流行前端框架整理

    万次阅读 2016-11-25 00:29:28
    时间飞逝,从事前端开发工作转眼已快两年,对于前端的知识,两年中却很少整理,偶然一同事问起前端框架,这才想起,其实应该好好整理下前端的基本知识点,许久之后,自己也能回过来也能复习。 在这互联网飞速发展的...
  • 2018几大主流的UI/JS框架——前端框架

    万次阅读 多人点赞 2019-02-23 19:32:08
    这一年中有很多热门的前端开发框架,下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。 在这互联网飞速发展的信息时代,技术的更新迭代也在加快。目前看来,火了十几年的Java技术现在仍然是棵常青...
  • 目前最流行的开源前端框架

    千次阅读 2018-06-12 16:52:52
    经常使用目前互联网比较流行前端框架,小编根据自己工作中、关注中的一些前端框架进行了梳理,对于现在的开发者来说,都向着全栈方向发展,所以必须掌握些前端比较流行的框架,这样才能增强自己的技术体系框架,也...
  • 一、前端框架 Angular Angular原名angularJS诞生于2009年,之bai前我们都是用dujquery开发,自从angular的出现让我们有了新的选择zhi,它最大的特点是把后端的一些开发模式移植到前端来实现,如MVC、依赖注入等。 ...
  • 有哪些目前流行前端框架

    万次阅读 2017-10-09 17:56:18
    使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中可能会用到不同的组件功能,这样说可能有一点片面,但是在面临几十种再做出选择的时候确实有一定的难度,难道每一种我都要去熟悉?这是不可能的事情,...
  • 前端CSS框架我选择了Bootstrap,不过后来还发现挺多好看的框架的,我是后悔了,列出来大家慢慢选  可以使用Bootswatch来装饰Bootstrap,有不同的免费主题可以选择semantic-ui,如果熟悉Bootstrap,学习这个基本...
  • Vue,React,Angular等前端JS框架对比,PC Web端Bootstrap,easy UI,AntDesign UI等前端UI框架对比,自己整理的,有需要的可以看看!
  • web前端框架——一些简单理解

    万次阅读 2018-08-09 20:19:06
    可以把bootstrap也叫作前端框架,也可以把jQuery zepto等叫做前端框架,当然AngularJS Backbone也叫做前端框架。不同就在于他们所针对的意义不一样bootstrap是目前桌面端最为流行的开发框架,一经 Twitter 推出...
  • 作为前端开发者,各种框架的层出不穷,促使我们要不断学习才能防止落后,但是我们不可能做到每个框架都有学习的时间,我们只需要掌握流行的,坑少的即可。从以下三个方面了解目前流行前端开发框架。 02. 跨多平台...
  • 最近着手写一个关于社区服务医院的小项目,对于前端展示页面的框架,在网上查找一番找到了当前较为流行的几个框架。其中也有包含微信端的框架。 PC端框架及其链接如下: 1.Bootstrap 官网地址:...
  • 如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,...
  • 常用前端UI框架快速开发web项目

    千次阅读 2018-03-23 16:36:54
    如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个。本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择。此外,许多选项都是...
  • 推荐几个精致的web UI框架及常用前端UI框架

    万次阅读 多人点赞 2017-03-30 09:19:33
    以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。 ...
  • 2019最受欢迎的前端7个UI框架

    万次阅读 2019-03-29 13:01:07
    一.Mint UI 官网:https://mint-ui.github.io/#!...由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周...
  • web前端开发常用的10个高端CSS UI开源框架 随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面。...1、Bootstrap–最流行的Web前端UI框架 ...
  • 2018年九个很受欢迎的vue前端UI框架

    万次阅读 多人点赞 2019-04-12 11:23:18
    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的公司项目。 学习的过程...
1 2 3 4 5 ... 20
收藏数 50,576
精华内容 20,230
关键字:

流行前端框架