Vue Bulma

Vue Bulma是基于Vue.js的Bulma框架的社区驱动UI组件库。它提供了众多的组件和样式，可快速构建现代化、美观的Web应用程序。

特点

• 基于Vue.js和Bulma框架
• 样式简洁、美观、易于定制
• 组件丰富、可扩展
• 支持按需加载

安装

你可以通过npm安装：

npm install vue-bulma --save

然后在你的Vue.js应用中引入：

import Vue from 'vue'
import VueBulma from 'vue-bulma'

Vue.use(VueBulma)

组件

Vue Bulma提供了众多的UI组件，包括：

• Alert 警告框
• Breadcrumb 面包屑
• Button 按钮
• Card 卡片
• Checkbox 复选框
• Dropdown 下拉菜单
• Input 输入框
• Form 表单
• Modal 模态框
• Navbar 导航栏
• Pagination 分页器

等等，可查看官方文档获取更多组件信息。

使用示例

以Button组件为例：

<template>
  <div>
    <b-button color="is-primary">Primary</b-button>
    <b-button color="is-success">Success</b-button>
    <b-button color="is-warning">Warning</b-button>
    <b-button color="is-danger">Danger</b-button>
  </div>
</template>

<script>
  import { BButton } from 'vue-bulma'

  export default {
    components: {
      'b-button': BButton
    }
  }
</script>

定制样式

Vue Bulma提供了方便的定制样式功能，你可以通过覆盖变量来自定义颜色、大小等样式。

首先在你的代码中引入Bulma框架的Sass文件：

@import '~bulma/bulma';

然后在你的代码中声明定制变量：

$primary: #00d1b2;
$success: #00d160;

@import '~bulma/bulma';

最后在你的代码中引入Vue Bulma组件库的样式覆盖Bulma框架的样式：

@import '~vue-bulma/bulma';

按需加载

如果你只需要使用部分组件，你可以使用babel-plugin-import按需加载，以减小打包体积。

首先安装插件：

npm install babel-plugin-import --save-dev

然后在你的.babelrc文件中配置插件：

{
  "plugins": [
    ["import", {
      "libraryName": "vue-bulma",
      "camel2DashComponentName": false,
      "style": true
    }]
  ]
}

最后在你的代码中按需引入组件：

import { BButton, BInput } from 'vue-bulma'