介绍
Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。
Bulma是一个基于Flexbox的免费开源CSS框架,已有200,000多名开发人员使用;笔者曾经也介绍过这一款css框架,目前star数已突破38.9k,确实是一个非常受欢迎的纯css框架
![3b7d803d26d8a520d1b48de7454197f8.png](https://i-blog.csdnimg.cn/blog_migrate/11aab0bae9a70f35cebd8e762754e5df.jpeg)
项目地址
- vue-blu
https://github.com/chenz24/vue-blu
- Bulma
https://github.com/jgthms/bulma/
特性
- 基于 npm + webpack + babel 开发,支持 ES2015
- 全面、灵活且强大的ui组件,API友好
- 样式基于Bulma框架(Flexbox based),布局简单、响应式
- 可定制化
![71682cd1ae6a41f8fd9169208085d827.png](https://i-blog.csdnimg.cn/blog_migrate/43e0741acdd721821116f655ca260a98.jpeg)
安装
$ npm install vue-blu --save
快速开始
import Vue from 'vue'import VueBlu from 'vue-blu'import 'vue-blu/dist/css/vue-blu.min.css'Vue.use(VueBlu)
组件
- Helper 帮助说明
Vue-Blu的样式库采用了bulma —— 一套新兴的、基于Flexbox、现代化的纯css框架。我们并不主张过度'组件化',像layout、button之类的元素,原生已经有了足够的表达力, 组件化之后反而会降低效率和灵活性
![4fb43200a54d04b3af0d858a7c0150bd.png](https://i-blog.csdnimg.cn/blog_migrate/a9be35d73b90939f0f7ab38e0af57ae9.jpeg)
- 布局
基于flexbox,强大的布局工具。
![efdc9efbe3efb261c59cecdb856cadec.png](https://i-blog.csdnimg.cn/blog_migrate/f7e52ad18fc821371a4bce80078f38c8.jpeg)
![a728dabee3b148abcd23cc3356509b06.png](https://i-blog.csdnimg.cn/blog_migrate/1fb11cc76ab5031ead3f22d8425c8f7f.jpeg)
![b2ffb26f7e8cc9002ea36e2a20139a5e.png](https://i-blog.csdnimg.cn/blog_migrate/0244aa383db36bafbdfce9763231773d.jpeg)
- 按钮
![f1f187324882fead9088e9b1d4868473.png](https://i-blog.csdnimg.cn/blog_migrate/163a724ccc85fd391ec7d0abea430c7e.jpeg)
![6e26ae83441157391c27fbcf05bded31.png](https://i-blog.csdnimg.cn/blog_migrate/9d63ca6fb8b87967590b2cccfcf05359.jpeg)
- 面包屑
在一个带有层次的导航结构中标明当前页面的位置,并可返回上级
![ba3300133bb82f2c0c2a5f91b32616b2.png](https://i-blog.csdnimg.cn/blog_migrate/5eb656e2e138d1f81df00761db1793bf.jpeg)
- 下拉菜单Dropdown
![08d3f079c43378f3e463f3a0242a8620.png](https://i-blog.csdnimg.cn/blog_migrate/c7f538a764292693f16a2b559510eb67.jpeg)
- 分页组件
![14d2bfa38f2f2e32ca37e4f29b18e55d.png](https://i-blog.csdnimg.cn/blog_migrate/09864f3eb68500940864f8512c5e0da0.jpeg)
![31c2fe95a5380b84b71a548a9d2ea7b1.png](https://i-blog.csdnimg.cn/blog_migrate/ac7c0517953de8181f2d2c2b8acf03aa.jpeg)
- 菜单Menu
![428317b123ba07fe8e9c5567d4d2ceb3.png](https://i-blog.csdnimg.cn/blog_migrate/d23635509cc48cf364c9b60a4909fde2.jpeg)
![65a8c0d9be924c8b5d4ccd18aac03222.png](https://i-blog.csdnimg.cn/blog_migrate/0011bcbe9c8f0737dda1728337e333f9.jpeg)
- 步骤条
步骤条,常用于分步操作
![8c5c68600df5ccda21645dfd4752bfc3.png](https://i-blog.csdnimg.cn/blog_migrate/d9e2ac4cd244af0ef6ede5d4de13bd53.jpeg)
![96addf04d20a349bd6b74c604eebfcc9.png](https://i-blog.csdnimg.cn/blog_migrate/e3c486ce0fa5bb5cf182f9062a7459d5.jpeg)
![cfc3934d34291bb4fbe83718880482e1.png](https://i-blog.csdnimg.cn/blog_migrate/852499de281442b53aca936ad28b74c7.jpeg)
- Tab标签页
选项卡切换,常用于内容的收纳和展现
![45d98f3b8b2d177e0ebaead86ed004ff.png](https://i-blog.csdnimg.cn/blog_migrate/2f8320f93e8cf18d40e6cc60b9d0f201.jpeg)
![5344c7943fd6bc6e22f531734ba67286.png](https://i-blog.csdnimg.cn/blog_migrate/5b176b7ceb262fb46f2d6367a3335aeb.jpeg)
![471d3bfbd25b31edcd79616ea7071fa8.png](https://i-blog.csdnimg.cn/blog_migrate/dd41cf64b22f1b1f9942d5a692c6531e.jpeg)
![0adbdd48851e40e2669e10de78132baa.png](https://i-blog.csdnimg.cn/blog_migrate/860ff96cb0ef35e1cb3f834ae443cbd0.jpeg)
- Alert警示框
警告提示,展现需要关注的信息。
![88fa7d0cc7e529e6be2afe8662ee19af.png](https://i-blog.csdnimg.cn/blog_migrate/ad020f836914bef2fba9362a21ee9fa2.jpeg)
![5bfcb379f13b9188dea9bf9b661a035c.png](https://i-blog.csdnimg.cn/blog_migrate/b5a7015dc95bb3db38f7cece39bf264f.jpeg)
- 侧边模态框
从侧边滑出的模态框
![f46b676d513123217960d3a445932c3c.png](https://i-blog.csdnimg.cn/blog_migrate/fee48044f6b0bb6b66ac36e583834e7b.jpeg)
![dffc41c56fd251b7328a489b3f06de9c.png](https://i-blog.csdnimg.cn/blog_migrate/8a323f1a0cdf44cb00ac838cea08d18b.jpeg)
- 折叠面板
可折叠展开的内容区域
![548c0b68a5decd6c6a236146a0419f40.png](https://i-blog.csdnimg.cn/blog_migrate/dea9041848bfa7d2ac3417b7973633a3.jpeg)
- 模态框
模态对话框
![98e6fa57bf282686f939bc8dfa6af200.png](https://i-blog.csdnimg.cn/blog_migrate/e3eca369669729412325fceaac0e28ab.jpeg)
![effd4690e86f91c79ef1ae5b9d3ba7eb.png](https://i-blog.csdnimg.cn/blog_migrate/2c94913fdc23f268f9ae768fc3b220f2.jpeg)
- 通知提示框
全局的消息提示
![421494dac30bb75df8a79e9444d904bf.png](https://i-blog.csdnimg.cn/blog_migrate/d8edd1e1744e257d779ccefea5306ffd.jpeg)
- tag标签
对不同事物的属性或维度进行标记和分类的小标签
![aed5ec2b75ab76c4339d2a8ee0426e67.png](https://i-blog.csdnimg.cn/blog_migrate/86334ac1c3a3814fadb83c0760768f46.jpeg)
- 进度条
为当前工作流程和动作提供实时反馈
![201edf822573ac7519618c0e5c6b8889.png](https://i-blog.csdnimg.cn/blog_migrate/1ee58eacb039c6c9243056cc2d5a81ce.jpeg)
- Popover
鼠标click/hover,弹出气泡似的浮层。类似popover,但可承载更多内容
![1f5e4666ffd4c036db07b953c248b504.png](https://i-blog.csdnimg.cn/blog_migrate/1271802d4f933f30f92d07da200c1249.jpeg)
![9c1f7224e1fb282d093127316696e2ba.png](https://i-blog.csdnimg.cn/blog_migrate/3a16308ccbdda2fdfb4255d5544eb10e.jpeg)
- tips
简单的文字提示气泡框,常用于鼠标hover时
![3219337fb165fc4eedc57edbeb988225.png](https://i-blog.csdnimg.cn/blog_migrate/596d4176c24a8b8344556d5626b4582b.jpeg)
- 时间线
垂直按时间展示的信息流
![9dc372ce0221db2080a6cdb9213f87ca.png](https://i-blog.csdnimg.cn/blog_migrate/56f2efc953f814bf9600c8cf210bf509.jpeg)
- DataTable表格
列表展示结构化的数据,支持排序、分页、自定义操作等复杂行为
![7934172a6d3602886383238c97067f00.png](https://i-blog.csdnimg.cn/blog_migrate/8e91ca1fb97cb98bb7ec784d8b112f43.jpeg)
![9d88ebc19c1f9a322dd1528264ab711c.png](https://i-blog.csdnimg.cn/blog_migrate/a1e454414105c09bd82f3b6ffdb9b8d3.jpeg)
![b2f170a53d8baa4043eebd16ea7fee0f.png](https://i-blog.csdnimg.cn/blog_migrate/c2fd17e1d67b72104ee16f6268b8fe0f.jpeg)
![2de7c708e4d1d40df670601bdd8bb3db.png](https://i-blog.csdnimg.cn/blog_migrate/10aeec8567e72d5472c9947b6411651e.jpeg)
![a503a5c09c9f6117f213c605df12f28e.png](https://i-blog.csdnimg.cn/blog_migrate/2606a408f97ae5031bf25a40d3ed6a76.jpeg)
![b67762bc4c78b886eff70d9adb0cba00.png](https://i-blog.csdnimg.cn/blog_migrate/4a0d0ab9c4da202820a7a4055633eff8.jpeg)
![4be5d98fa7ffe3825642f5621a3d78e8.png](https://i-blog.csdnimg.cn/blog_migrate/76db334e03ea88064dab15c0cf8d9a7b.jpeg)
- 表单
对于表单的样式和布局等展现方面的实现,我们认为原生的HTML元素加CSS足以满足,特别是有了Bulma。所以Blu的Form基本全部依赖于Bulma。对于某些功能性的表单组件如AutoComplete、Select, Blu会另有封装。
![96136fed8e30f21e2f8b78ce89af1d66.png](https://i-blog.csdnimg.cn/blog_migrate/164d152e0dd1e094e4d2d9c89eb621ab.jpeg)
![744df4769647ad898a5eb479178d195d.png](https://i-blog.csdnimg.cn/blog_migrate/6d080953269b1be198109cea7aefe333.jpeg)
![c9e6572fffb91188db46cf56a1dd3e18.png](https://i-blog.csdnimg.cn/blog_migrate/d72c0176d99627a1ff778e2bfb9fa21e.jpeg)
![8a46f3a8508ab71363c3407476ec552b.png](https://i-blog.csdnimg.cn/blog_migrate/93f65dd5debb66cea214e2e4c471a94c.jpeg)
![ccbd00c3f093005c0706dc1dfc9947f1.png](https://i-blog.csdnimg.cn/blog_migrate/ff73bfaa973c52ed71b31faba3581b8f.jpeg)
![8d2f570194bd1cbb7c986a7ab6b3b241.png](https://i-blog.csdnimg.cn/blog_migrate/f9e6d51c9a6c2cd5afcb5bf453c95e17.jpeg)
![17aa395423eca3cf933c28d0b2d04e91.png](https://i-blog.csdnimg.cn/blog_migrate/92ed63c0b5aa70da821981c4b16d063a.jpeg)
- 数字输入
用在数字的输入场景中,可使用鼠标和键盘操作
![4fbdd93aeb28d70feee7820aa4651dfc.png](https://i-blog.csdnimg.cn/blog_migrate/15f50855bf228186a4d92ad0af265b27.jpeg)
- Radio单选框
![f2d00d54c2fbe065d9ad0e5bfc8e9708.png](https://i-blog.csdnimg.cn/blog_migrate/6b8868917d3a2761a3abb5e886ebfed3.jpeg)
- CheckBox复选框
![d13c21dbb5c9849f52a631583b6bcd41.png](https://i-blog.csdnimg.cn/blog_migrate/25213848cddb1df6c2c718f862e40e35.jpeg)
- Switch开关
![2e7157038e0f70f5149a818496a1b716.png](https://i-blog.csdnimg.cn/blog_migrate/e215479093ad4216ff1f49902c077380.jpeg)
- 日期
日期时间选择器,基于轻量且强大的 flatpickr
![731c92336331e4d63a6bdd783765e6da.png](https://i-blog.csdnimg.cn/blog_migrate/4c85a50312ca29725d1198932a669fc8.jpeg)
总结
不论是从UI还是从功能,以及从组件丰富程度来看,Vue-Blu都是非常值得使用的一个Vue的组件,可以不必拘泥于市面上最常用的UI,偶尔换一下风格也是非常有必要的!enjoy IT!