你所不知的十二个前端组件库

**

element-ui

**

网站地址 : https://element.eleme.cn/2.13/#/zh-CN/component/changelog
支持的前端框架 :Vue 、React 、Angular

<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

适用方向:后台管理 (样式易覆盖)

**
在这里插入图片描述

vxe-table 一种强大的table组件库

**

网站地址:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic
支持的前端框架 :Vue

<!-- 引入样式 -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
   <!-- 引入脚本 -->
   <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
   <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

适用方向:table表格

注意:因vxe-table普及率暂时不高,所有某些问题并不能找到前人解决的办法,如果是重要项目并且是第一次使用,最好不要使用此组件

**
在这里插入图片描述

Vant - 轻量、可靠的移动端 Vue 组件库 (商品类的)

**
网站地址:https://youzan.github.io/vant/#/zh-CN/quickstart
支持的前端框架 :Vue

<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>

适用方向:淘宝商品类的网站 功能性不太强

**
在这里插入图片描述

vant-weapp 小程序(商品类的)

**
网站地址:https://youzan.github.io/vant-weapp/#/submit-bar
支持的前端框架 :Vue
引用 : 建议根据文档进行安装插件
适用方向:淘宝商品类的APP或者小程序 功能性不太强

**
在这里插入图片描述

layui

**
介绍:是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
网站地址:https://www.layui.com/demo/layim.html
支持的前端框架 :layui 本身就是一种框架
引用 : 建议根据文档进行安装插件
适用方向:layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

**
在这里插入图片描述

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库

**
介绍:是一款基于 Taro 框架开发的多端 UI 组件库
网站地址:http://taro-ui.jd.com/#/docs/introduction
支持前端框架: Taro(可以搭配 react使用)
引用 : 建议根据文档进行安装插件
适用方向:一套组件可以在 微信小程序,支付宝小程序,百度小程序,H5 多端适配运行(ReactNative 端暂不支持)
**
在这里插入图片描述

uni-app

**

介绍:uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
网站地址:https://uniapp.dcloud.io/
支持前端框架: Vue
引用 : 建议根据文档进行安装插件
适用方向:iOS、Android、H5、以及各种小程序

在这里插入图片描述
**

iViewUI

**
网站地址:https://www.iviewui.com/components/table
支持前端框架: Vue
引用 : 建议根据文档进行安装插件
适用方向:小程序开发
在这里插入图片描述
**

MUI

**
介绍:最接近原生APP体验的高性能前端框架
网站地址:http://dev.dcloud.net.cn/mui/
适用方向:手机App
在这里插入图片描述
**

cubeUI

**
网站地址 : https://didi.github.io/cube-ui/#/zh-CN
适用方向:Vue
在这里插入图片描述
**

Bootstrap

**
介绍:是全球最受欢迎的前端开源工具库,它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能,能够让你快速设计并自定义你的网站。
网站地址:https://www.bootcss.com/
适用方向:Vue、React、Angular
在这里插入图片描述
**

swiper轮播图

**
介绍:是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。
网站地址:https://www.swiper.com.cn/
适用方向:Vue、React、Angular
适用方向:使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
在这里插入图片描述

  • 4
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值