为了日常开发的方便,分享一些平时收藏且实用性比较高的的网站…
一.配色方面:
colorhunt:https://colorhunt.co/
(这个网站给我们提供了几十种的配色方案,鼠标移动到对应的颜色上即可获取颜色值);
Adobe Color:https://color.adobe.com/zh/create/color-wheel
(点击拖动圆盘中间的点,就可以调整出我们所需的配色方案,蛮不错的);
web安全色:https://www.bootcss.com/p/websafecolors/
(这个比较简单,列出了颜色的16进制码和rgb码,直接取色就行);
二.图标类:
阿里巴巴字体图标:https://www.iconfont.cn/plus
(这是阿里旗下的图标库网站,直接搜索即可出现大量的图标,经常用,哈哈…)
Font Awesome:http://www.fontawesome.com.cn/
(提供丰富的矢量字体图标,通过css可以任意控制所有图标的大小 ,颜色,阴影)
三.图片素材:
花瓣网:https://huaban.com/
(设计师,摄像师等等的分享的超多图片集合)
别样网:http://duososo.com/banquan.php
(无版权图片,可商用图片,无版权图片网站,无版权图片网站合集)
大作:http://www.bigbigwork.com/photographyb.html
(超过3000万张免费商用高清图片,覆盖全球200+图片网站)
四.插件库:
swiper:https://www.swiper.com.cn/
(swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端)
jQuery插件库:http://www.jq22.com/
(一些jq的案例,特效,基于jq框架的demo,方便在线预览)
17素材:https://www.17sucai.com/
(模版,js的案例分享,h5动画,css3的效果等等…)
layui:https://www.layui.com/
(是一款采用自身模块规范编写的前端 UI 框架,以前比较常用)
Element UI:https://element.eleme.cn/#/zh-CN/component/installation
(Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库)
clipboardjs:http://www.clipboardjs.cn/
(可复制页面内容-图片/文字等等,可以看下我的案例:复制图文)
iView后台UI框架:https://iviewui.com/
五.工具:
在线工具:https://tool.lu/
(一个在线工具网站,包含大量在线工具,如js,html,css,php,sql…)
cutterman:http://www.cutterman.cn/zh
(安装到ps中的插件包,可切图,标注等等操作…)
熊猫压缩:https://tinypng.com/
(图片在线压缩,png 或者 jpg,但个人常用的软件是这个PNGoo自行下载)
六.第三方平台:
七牛:https://developer.qiniu.com/dora
(API挺多的,如音视频处理,图片处理,文件处理等…)
和风天气:https://dev.heweather.com/docs/api/weather
(和风天气的天气数据开发是一个强大、现代化、开发友好的天气数据服务。)
腾讯地图:https://lbs.qq.com/webservice_v1/index.html
(腾讯旗下的地图WebService API…,跟百度,高德差不多…)
保利威视:http://www.polyv.net/
(关于视频的:云直播,云点播,最近更新了小程序的直播…)
七.常用的第三方框架
ruoyi
http://www.ruoyi.vip/
wxjava
https://gitee.com/binary/weixin-java-tools
course-tencent-cloud 网络教育软件
https://www.oschina.net/p/course-tencent-cloud
https://gitee.com/koogua
春松客服 全渠道智能客服系统
https://www.oschina.net/p/chatopera-cosin
https://github.com/chatopera/cskefu/wiki
FateNameMaker 现代科学取名工具
https://www.oschina.net/p/fatenamemaker
https://github.com/babyname/fate
VuePress 基于 Vue 的静态网站生成器
https://www.oschina.net/p/vuepress
Vditor 浏览器端 Markdown 编辑器
https://www.oschina.net/p/vditor
https://vditor.b3log.org/
ThinkAdmin 后台管理系统
https://www.oschina.net/p/thinkadmin
https://thinkadmin.top/
sa-token 轻量级权限认证框架
https://www.oschina.net/p/sa-token
https://sa-token.dev33.cn/
MyExcel 多功能 Excel 工具包
https://www.oschina.net/p/MyExcel
https://github.com/liaochong/myexcel
Markdown Nice 在线微信 Markdown 排版工具
https://www.oschina.net/p/markdown-nice
MDEX Android 一键脱壳工具 Xposed 插件
https://www.oschina.net/p/mdex
https://gitee.com/Ryan_ma/MDEX
Luckysheet 在线电子表格
https://www.oschina.net/p/luckysheet
https://github.com/liaochong/myexcel
JustAuth 第三方授权登录的工具类库
https://www.oschina.net/p/JustAuth
https://www.zhyd.me/
八、优秀的微信小程序&前端框架
Lin UI 微信小程序组件库
https://www.oschina.net/p/lin-ui
https://doc.mini.talelin.com/
WeUI WXSS
WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。
GitHub地址:https://github.com/Tencent/weui-wxss
iView WeApp
iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。
GitHub地址:https://github.com/TalkingData/iview-weapp
ZanUI WeApp
ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。
现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。
GitHub地址:https://github.com/youzan/zanui-weapp
MinUI
MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。
GitHub地址:https://github.com/meili/minui
Wux WeApp
Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。
GitHub地址:https://github.com/wux-weapp/wux-weapp
ColorUI
ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
其组件在美观性方面比较突出。
GitHub地址:https://github.com/weilanwl/ColorUI
uView
uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
https://www.oschina.net/p/uview-2
https://www.uviewui.com/
avue 基于 Element 的前端框架
https://www.oschina.net/p/avue
https://gitee.com/smallweigit/avue
https://avuejs.com/
iconfont
图标库
https://www.iconfont.cn/
VUE框架:
之前得到消息vue在GitHub已经超过react,成为第一大框架,让我们来看看以vue为基础的开发框架有哪些?
Element(start-28128)
饿了么前端推出的基于 Vue.js 2.0 的后台组件库,它能够帮助你更轻松更快速地开发 web 项目
官网地址
Element - The world's most popular Vue UI framework
iview(start-15674)
iview一套基于 Vue.js 的高质量 UI 组件库,友好的 API ,自由灵活地使用空间,细致、漂亮的 UI。由TalkingData开发维护,有很多知名互联网企业都在使用
官网地址iView - A high quality UI Toolkit based on Vue.js
vuetify(start-11449)
一个为 Vue JS 2.0 打造的 Material 风格的组件库,喜欢material design的朋友可以去尝试一下
官网地址Vuetify — A Material Design Framework for Vue.js
vue-strap(start-4752)
基于 Vue.js 的 Bootstrap 组件
该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件,唯一需要依赖的是:
Vue.js (要求版本为 ^0.12,基于 0.12.10 版本做的测试)
Bootstrap CSS (需要版本为 3.x.x, 基于 3.3.5 版本做的测试)。 VueStrap 不依赖某个非常精确的 Bootstrap 版本。如果喜欢bootstrap的小伙伴又不想换jquery的开发方式是不二的选择。
官网地址http://yuche.github.io/vue-st...
cube-ui(start-3583)
滴滴团队开发的一套基于 Vue.js 实现的精致移动端组件库
官网地址
https://didi.github.io/cube-u...
buefy(start-3086)
基于 Bulma 的 Vue.js 轻量级 UI 组件库, 全英文版
https://buefy.github.io/#/
vue-beauty(start-1569)
基于 ant design 的漂亮的 vue 组件库
官网地址
https://fe-driver.github.io/v...
vue-storefront(star-1567)
Vue.js Storefront - 将 PWA 集成到电子商务的框架,支持离线访问
官网地址
Lightning Fast Frontend for Headless Commerce | Vue Storefront
at-ui(star-1423)
一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站产品
官网地址
https://at-ui.github.io/at-ui...
at-ui(star-1358)
基于 Vue.js(2.x) 和 Bulma 的 UI 组件库
官网地址
https://chenz24.github.io/vue...
大家可以从中挑选适合自己项目的框架进行使用
Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库。下面PHP程序员雷雪松详细的介绍一下给大家强烈推荐优秀的的Vue UI组件库。
1、 iView UI组件库
iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的,更新也很快,文档写得很详细。有公司团队维护,比较可靠的Vue UI组件框架。iView生态也做得很好,还有开源了一个iView Admin,做后台非常方便。官网上介绍,iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。
iView官网:https://www.iviewui.com/
2、Vux UI组件库
Vux是基于WeUI和Vue2.x开发的移动端UI组件库,主要服务于微信页面。Vux的定位已经很明确了,一是:Vue移动端UI组件库,二是:WeUI的基础样式库。Vux的组件涵盖了所有的WeUI的内容,还扩展了一些常用的组件。比如:Sticky、timeline、v-chart、XCircle。Vux是个人维护的。但是GitHub上star还是很高的,达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的使用案例。在微信页面开发中,基本没有太多的bug,开发还是比较顺手的。
Vux官网:https://vux.li/
3、Element UI组件库
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库,更新频率还是很高的,基本一周到半个月都会发布一个新版本。组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。没有实际使用过,网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。
Element官网:http://element.eleme.io/#/zh-CN
4、Mint UI组件库
Mint UI基于 Vue.js 的移动端组件库,同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的,开发移动端web项目还是很方便,文档也很简介明了。很多页面Mint UI组件都已经封装好,基本可以照着例子写,简单的调整一下就可以实现。不过,在GitHub上看最后一次代码提交在2018年1月16日,截止到目前已经过去半年了。不知道是项目比较稳定没有更新,还是项目有被废弃的可能。我们会持续关注Mint UI的动态。
Mint UI官网:http://mint-ui.github.io/#!/zh-cn
5、Bootstrap-Vue UI组件库
Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现,完成了广泛和自动化的WAI ARA可访问性标记。Bootstrap 4是最新发布的版本,与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。想当初刚流行响应式网站的时候,Bootstrap是世界上最受欢迎的建立移动优先网站的框架,Bootstrap可以说风靡全球。就算放在现在很多企业网站都是采用Bootstrap做的响应式。Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。
Bootstrap-Vue官网:https://bootstrap-vue.js.org/
6、Ant Design Vue UI组件库
Ant Design Vue是 Ant Design 3.X 的 Vue 实现,开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言,Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系,实现了所有Ant Design of React的组件,支持现代浏览器和 IE9 及以上(需要 polyfills)。可以让熟悉Ant Design的在使用Vue时,很容易的上手。
Ant Design Vue官网:https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/
7、AT-UI UI组件库
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品,支持现代浏览器和 IE9 及以上。AT-UI 更加精简,实现了后台常用的组件。
AT_UI官网:https://at-ui.github.io/at-ui/#/zh
8、Vant UI组件库
Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的,主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。截止到目前,Vant已经开源了50+ 个经过有赞线上业务检验的组件。比如:、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的,不太在意界面,实现业务逻辑的话,用Vant组件库开发还是很快的。
Vant官网:https://youzan.github.io/vant/#/zh-CN/intro
9、cube-ui UI组件库
cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
cube-ui官网:https://didi.github.io/cube-ui/#/zh-CN
10、Muse-UI UI组件库
Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件,用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用
Muse-UI官网:https://muse-ui.org/#/zh-CN
11、N3-components UI组件库
N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。N3-components超过60个组件 组件列表、自定义样式、支持多种模化范式(UMD)、使用ES6进行开发。
N3官网:https://n3-components.github.io/N3-components/component.html
12、Mand Mobile
Mand Mobile是面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品,让复杂的金融场景变简单。Mand Mobile含有丰富的组件30+的基础组件,覆盖金融场景,极高的易用性组件均有详细说明文档、案例演示,汲取最前沿技术,组件化轻量化实现,兼顾稳定和品质,努力实现金融场景的全覆盖。
Mand Mobile官网:https://didi.github.io/mand-mobile/#/zh-CN/home
13、we-vue UI组件库
we-vue 是一套基于 Vue.js 的移动关组件库,结合 weui.css 样式库,封装了一系列组件,非常适于微信公众号等移动端开发。we-vue 包含35+ 个组件,单元测试覆盖率超 98%,支持 babel-plugin-import,完善的在线文档,详细的在线示例。
we-vue官网:https://wevue.org/
14、veui UI组件库
veui是一个由百度EFE team开发的Vue企业级UI组件库。目前文档还没有,只有demo。GitHub上说是正在进行的一项工作。那我们就耐心等待吧。
veui官网:https://ecomfe.github.io/veui/components/#/
15、Semantic-UI-Vue UI组件库
Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。Semantic-UI-Vue提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。
Semantic-UI-Vue官网:https://semantic-ui-vue.github.io/#/
16、NutUI组件库
NutUI是一套京东风格的移动端Vue组件库,开发和服务于移动Web界面的企业级前中后台产品。NutUI组件库支持跨平台,自动转微信小程序组件(稍后上线,敬请期待),30+ 京东移动端项目正在使用,基于京东APP 7.0 视觉规范,支持按需加载,详尽的文档和示例,支持定制主题,支持多语言(国际化),支持 TypeScript,支持服务端渲染(Vue SSR),单元测试加持,配套有基于Webpack的构建工具,可快速创建已内置本组件库的Vue工程。
NutUI官网:https://nutui.jd.com/#/index
PHP程序员雷雪松提醒大家,在选择框架的时候一定要根据实际Web开发情况和团队的熟悉程度来选择。一个好的UI组件库对一个Web项目来说太重要了。好的UI组件库可以起到事半功倍的效果。希望这篇《强烈推荐优秀的Vue UI组件库》博客能帮助大家!
原文来源:https://www.leixuesong.com/3342