简介
vue-bluer 是一个 Vue.js 的 UI 库，源代码托管于 Github 上，可以通过 npm 进行安装使用。该 UI 库基于脚手架工具 Vue CLI 3.0 搭建，提供了一些常用组件如按钮、表格、表单等，支持主题切换，提供了丰富的自定义选项。
安装
在 Node.js 环境下，使用 npm 命令进行安装：
npm install vue-bluer --save
使用
在应用启动时，需要在 Vue 注册该 UI 库：
import Vue from 'vue'; import VueBluer from 'vue-bluer'; Vue.use(VueBluer);
然后，在组件中即可使用该 UI 库提供的组件：
-- -------------------- ---- -------
----------
-----
--------------- -------------
------
-----------
--------
------ ------- -
----- -------------
-
---------主题切换
vue-bluer 提供了两套主题：light 和 dark，可以通过以下方式进行切换：
import Vue from 'vue';
import VueBluer from 'vue-bluer';
Vue.use(VueBluer, {
theme: 'light' // 可选值为 'light' 或 'dark'
});当然，也可以通过 CSS 来自定义主题，只需要在项目的样式文件中重新定义相应的变量即可。
组件
vue-bluer 提供了以下组件，分别用于实现常用的页面元素：
b-button
一个按钮，支持五种类型：default、primary、success、warning、danger。
-- -------------------- ---- -------
----------
-----
----------------------------
--------- ---------------------------------
--------- ---------------------------------
--------- ---------------------------------
--------- -------------------------------
------
-----------b-input
文本输入框，支持四种类型：text、password、textarea、number。
-- -------------------- ---- -------
----------
-----
-------- -------------- --
-------- --------------- ------------------ --
-------- --------------- ------------------ --
-------- ------------- ----------------------- --
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
----- ---
--------- ---
--------- ---
------- -
--
-
--
---------b-select
下拉选择框，支持选项列表的动态生成以及选中值的双向绑定。
-- -------------------- ---- -------
----------
-----
--------- ------------------ ------------------ --
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
--------- ---
-------- -------- --- ------- --- ------- ---
--
-
--
---------b-checkbox
复选框，支持选中状态的双向绑定。
-- -------------------- ---- -------
----------
-----
----------- ---------------------------------
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
-------- -----
--
-
--
---------b-radio
单选框，支持选项列表的动态生成以及选中值的双向绑定。
-- -------------------- ---- -------
----------
-----
-------- ------------------ ------------------ --
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
--------- ---
-------- -------- --- ------- --- ------- ---
--
-
--
---------b-table
表格，支持动态生成表头以及表格数据的双向绑定。
-- -------------------- ---- -------
----------
-----
-------- ------------------ ------------ --
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
-------- -
- ------ ----- ---- ------ --
- ------ ----- ---- ----- --
- ------ ----- ---- -------- -
--
----- -
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- -
-
--
-
--
---------自定义选项
vue-bluer 提供了一些自定义选项，可以通过以下方式进行配置：
-- -------------------- ---- -------
------ --- ---- ------
------ -------- ---- ------------
----------------- -
-- -----
------------- ---------
-- --------
------------ ---------
-- ------
------------------- ------------ -----------
-- -----
----------------- -
--------------- -
--------- -------- ----------------
-
-
---更多配置选项详见源代码文档。
总结
vue-bluer 作为一个轻量级的前端 UI 库，提供了常用组件的实现，并提供了丰富的自定义选项，方便开发者根据项目需求进行定制。通过本文的学习，相信读者已经能够熟练使用该 UI 库了，希望这对读者的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548681e8991b448d1c97