简介
buefy 基于vue>2.5, bulma>=0.7.5的一款响应式移动UI框架，github star 5.7K+, buefy所有组件都支持响应式，目前大约有(Button,Collapse,Dialog,Dropdown,Form controls[Autocomplete,Checkbox,Clockpicker,Datepicker,Field,Input,Numberinput,Radio,Select,Switch,Taginput,Timepicker,Upload],Icon,Loading,Message,Modal,Notification,Pagination,Snackbar,Steps,Table,Tabs,Tag,Toast,Tooltip)等35个左右组件，压缩js文件32KB[min + gzip],压缩css文件28KB[min + gzip]（包括bulma），可以说非常轻量级的一款UI框架。对应组件够用，需要响应式的项目，32kb的js和28kb的css可以说完全不用考虑网络带宽问题，可以选择buefy作为项目的前端框架。官网截图如下：
特征
- 轻松保留您当前的Bulma主题/变量
- 支持Material Design Icons和FontAwesome
- 非常轻量级，除了Vue和Bulma之外没有内部依赖性
- 大约60KB min + gzip（包括Bulma）
- 语义代码输出
- 遵循Bulma设计和一些Material Design UX
- 专注于可用性和性能，而无需过度动画的东西
浏览器兼容性
最新版本的Firefox，Chrome，Edge，Opera和Safari。部分支持IE10+。
快速上手
1 安装
npm install buefy
2 导入和使用Buefy
导入所有组件
import Vue from 'vue'; import Buefy from 'buefy'; import 'buefy/dist/buefy.css'; Vue.use(Buefy);
导入个别组件
import Vue from 'vue'
import { Field, Input } from 'buefy/dist/components'
import 'buefy/dist/buefy.css'
Vue.use(Field)
Vue.use(Input)
or
import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'
Vue.use(Field)
Vue.use(Input)
3 导入 Material Design Icons
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
4 使用CDN
<!-- Buefy CSS --> <link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css"> <!-- Buefy JavaScript --> <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
用法示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
<div id="app">
<!-- Buefy components goes here -->
</div>
<script src="https://unpkg.com/vue"></script>
<!-- Full bundle -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<!-- Individual components -->
<script src="https://unpkg.com/buefy/dist/components/table"></script>
<script src="https://unpkg.com/buefy/dist/components/input"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>