前端

Fighting Design 是一款灵活、优质的前端组件库，基于当前流行的 Vue3 + TypeScript + Vite 开发，方便开发者在 Vue3 项目中快速集成。和绝大多数开源的组件库不同，这个项目主要由来自杭州的开发者田同学 开发和维护，在最新的一期阮一峰科技周刊中还被推荐了，广受关注。

早在两年前，我就介绍了金山云出品的 kpc 这套组件库，现在这套组件库迎来了全新的 2.0 版本，名字也更改为 KingDesign ，整体质量有了很大的提升，更接近于 element UI 或 Ant design 这种完整的设计系统，在产品研发中，一般用于搭建中后台管理系统。

Vexip UI 是一款新鲜出炉的前端 UI 组件库，基于最新的 Vue3 开发，主要用于web 项目 UI 界面开发。作者是来自广州的开发者qmhc，没有大厂背景，在工作之余开发了这套组件库。

Uigg 是为设计师打造的配色漂亮、设计细节感人的前端框架，主要思想是：自由和灵活性。相比于很多开发至上、效率至上的 UI 框架，Uigg 没有提供网格，开发迭代优化等会限制设计师发挥的元素。只提供了基本 web 元素，酷炫的特效，全面的图标以及很多有趣的东西。而且它非常易于使用，这使您可以专注于设计，而不是代码。

Onsen UI 是一套专为移动应用设计的丰富的 UI 组件库，使用前端开发者熟悉的javascript/html/css 来开发移动应用，所有的组件都按照原生 iOS 和 Android Material Design 设计标准规范

Naive Ui 是不久之前推荐的一款优秀的 UI 组件库，基于最新的 Vue3.0、Vite、 Naive UI、TypeScript 等前端技术栈， 而今天分享的 Naive Ui Admin 就是基于 Naive Ui 构建的 admin 中后台前端框架。

在移动端的地位相当于 element ui，相当强劲的一款UI组件库，v3版本经过半年的迭代，已经非常稳定了。

NutUI 是京东样式风格的 Vue 移动端组件库，开发和服务于移动 Web 界面的企业级产品。

使用 ChatUI 帮助开发者快速搭建体验友好的机器人对话界面，部分独立软件开发商已经在阿里内部内测使用，开发周期从平均14天大大缩短到2天。

Quasar 是一个基于 Vue.js 开发的 ，性能顶级，能够用于快速开发 web 桌面产品或 App 项目，编写一次代码，同时发布为网站、移动应用或Electron 桌面应用。

这是Element UI 的升级版本，体验同样优秀，api更加友好，文档同样详尽，很香。

Wired Elements 是一款手绘线框风格的 ，包含了web 开发常见的基本 UI 元素，能够满足快速构建自然的手绘产品界面。

一款轻量化的移动端 UI 组件库，风格中性，css3动效性能优秀，支持按需加载。

前端发展非常繁荣，不少大厂都推出了自己的 UI 组件库，金山云作为一个手握国民办公软件 WPS 的老牌的国产软件厂商，也推出了自家的前端框架 KPC。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

Material Design 是 Google 推出的设计语言，颜色鲜艳、动画效果突出，旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

vonic 是一个基于  和 ionic 样式的 ，主要用于快速构建移动端单页应用，也就是用我们熟悉的 html+css，javascript 来开发App。

轻量可靠的小程序UI组件库，主流移动组件库 Vant 的微信小程序版本。

Tippy.js 是一款用于 Web 的完整工具提示，弹出菜单，下拉菜单和菜单解决方案。适用于鼠标，键盘和触摸输入。

专门为著名的前端开发 UI 框架 Bootstrap 的组件和文档定制开发的图标库。

iconmonstr 是一个以简单线条为主的的免费图标库，截止发稿，收录了超过4496个图标！相比于很多简约简单的图标，iconmonstr 的图标表现力非常丰富，非常适合用在PPT、企业官网设计下的大图标块以及 UI 界面上的大图标模块，非常地好看。

NutUI 1.0 版本于 2018 年发布，是一套来自京东用户体验设计部（JDC）前端开发部的移动端组件库。近期，全新版本的 NutUI JDL 发布了，定位京东风格的移动端精品组件库，并不是 NutUI 的简单升级版。NutUI JDL 是我比较中意的一款，大量小巧漂亮的动画让我爱不释手。

View UI ，即原先的 iView，一套基于 Vue 的开源 UI 组件库，主要用于 PC 界面的中后台产品。View UI 的初衷是提供高质量、功能丰富的基础组件，以及友好的 API，当然还有独树一帜的漂亮 UI。核心研发团队来自一线 to B 企业，对中后台产品、业务有着多年的深入研究和沉淀。

轻量、可靠的移动端 ，采用 MIT 开源协议, 目前github star 数23k+，是有赞的一套开源组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近 60+ 个组件，这些组件被广泛使用于有赞的各个移动端业务中。

Ant Design 是一个带设计语言的免费 UI 框架，一个致力于提升「用户」和「设计者」使用体验的企业级设计体系，简单地说，能够让使用它的人更愉悦。

由饿了么团队出品，一套为开发者、设计师和产品经理准备的组件库，提供了配套axure、设计资源，可以直接下载使用，能帮我等搬砖人员节省大量的时间。

Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器，基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 使用易上手，对开发者友好，而且可扩展性强，设计简洁。

SCUI Admin 是一个中后台管理系统的前端解决方案，俗称 admin ui 框架，用于让开发者搭建业务管理后台，基于当前最新的 Vue3 和 Element Plus 实现。和一些包含后端开发的 admin 项目不一样，SCUI Admin 是一个纯前端的解决方案，无论后端使用什么语言开发，都没有限制。

Fuse.js 是一个功能强大、轻量级的模糊搜索库，通过提供简单的 api 调用，达到强大的模糊搜索效果，无需搞懂复杂的模糊搜索算法。

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

西瓜播放器 (xgplayer.js) 不是一个看片软件，而是一个 Web 开发上的视频播放器类库，也是一个独立的 UI 组件，用来实现在网页上播放视频的功能。不仅在 UI 层有灵活的表现，同时也集成了对 flv、hls、dash 的点播和直播支持，尤其是在 mp4 点播上很便捷，让本来不支持流播放的 mp4 格式视频能够分段加载，无须转换格式实现清晰度无缝切换、加载控制、节省视频流量的需求，节省服务器开销。

Hilo 是阿里团队推出的一个开源的 H5 游戏引擎，特点是对非游戏从业的前端开发者非常友好，轻量无依赖，适合用来开发营销小游戏。

Loaders.css 是一个性能出色的 web 前端代码库，或者叫 CSS 库，因为它完全没有用到一行 js 代码或者图片，仅仅利用纯 CSS 就实现多种样式的 loading 动画，运行流畅丝滑，轻量小巧，性能优秀。

Pxmu.js 是一款由七如团队开发的 web 消息提示框插件，特点是轻量无依赖，整个插件只有一个 js 文件，支持常用的消息提示功能。

Vue 作者尤雨溪大神近期的新作品，Vue 的 小巧可代替版，值得关注。

Vue Easy Slider 是一个使用简单，功能简洁的 独立轮播图组件，开发者只需要花费几分钟接入，就能满足常见的轮播图需求，让开发者节省了不少宝贵的开发时间。

Tiptap 是一款专为 打造的简洁明快的，通过简单的设置能为用户提供多种优秀的文字编辑体验。

MyUI 是一款由新德汇出品的基于 Vue + Element UI 构建的工程框架，专注于中后台管理系统快速搭建。喜欢 Element UI 的小伙伴，现在终于有了一个颜值在线，综合素质优秀的 admin UI 框架了。

Swiper 是一款纯 javascript 打造的滑动特效插件，主要用对移动端 web 开发中的内容触摸滑动需求，同时兼容 PC 网页。该插件团队维护多年，非常稳定，是移动端网站滑动需求的重要选择。

动态生成带二维码的海报是业务型产品中很常见的需求，之前分享过如何通过 html2canvas 将html+css写出来的布局生成海报，而今天分享的 QRCanvas 则是专门满足如何在前端生成动态二维码的需求。

Chart.js 是一个基于 canvas 的可视化开源库。它可以用于构建简单漂亮的 图表，满足产品数据可视化的需求。

在微信项目中经常会遇到动态生成海报的需求，前端合成图片往往会使用canvas。canvas 虽然强大，但用来合成海报非常繁琐，一不小心就几百行代码了。而 html2canvas.js 是一款轻松地将HTML+CSS写成的布局直接转换成canvas，生成可保存分享的图片。

HeyUI 是基于 2.0 的开源 UI 组件库，是一整套解决方案，所有的组件提供全局的可配置模式，主要服务于一些。值得一说的是，这个库的作者是一位很有个性的女程序员，文本能力也超强，官网上的文档写得清楚易懂，十分容易上手。

VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。在 jQuery 的时代，有很多动效非常流畅丝滑的拖拽排序插件，但在国内 Vue.js 起来后，却比较难找到一款像 Sortable.js 那样的组件，而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。

启动一个项目，无论是App、小程序还是 web 开发，后台管理系统都是必不可少的。从0到1开发一个 UI 框架是一个工作量非常庞大的事，而优秀的UI框架能给我们的后台开发带来了极大的方便。

短视频大火已经有很长时间了，日常工作中我们可能很容易接到视频播放相关的需求。这是一款非常优秀的视频播放组件，pc 或者 移动都可以使用，而且 UI 精美，美观，丝毫不逊色于爱奇艺、优酷等国内一线网站的 UI。

LibreShot 是一个由国外摄影师 Martin Vorel 搭建的摄影图片分享网站，他因为喜欢摄影，也喜欢分享自己的摄影照片，就干脆建立一个网站，把所有的照片发布到上面，让同样喜欢这些照片的人可以下载使用。

ES新标准以及带来的新特性，都可以在这个教程上实时学习和查询。