在前端开发中，UI 组件库的使用是必不可少的。相信大家常用的莫过于 Element、Ant Design、Vant 等。但是，这些组件库虽然功能丰富、易用性高，但是体积也相对较大，而且风格也比较单一，有时很难满足我们的个性化或特定需求。
此时，第三方的 UI 组件库就应运而生了。今天，我们要介绍的就是一款新兴的 UI 组件库：better-ui。
better-ui 是什么？
better-ui 是一款基于 Vue.js 的 UI 组件库，它使用 TypeScript 进行开发，提供了一系列灵活、高效、易扩展的 UI 组件，并支持按需引入和主题定制，可以大大减少您的开发成本。
better-ui 的优势
1. 功能丰富
better-ui 提供了丰富的组件，包括常见的按钮、表单、数据展示、弹窗、图表等等。它的组件设计很简洁，用起来十分直观、友好。
2. 可扩展性强
better-ui 的组件设计为可定制化、可扩展性强。它提供了一整套组件主题定制方案，您可以通过覆盖样式变量、编写样式等方式进行自定义主题。
3. 体积小巧
better-ui 采用了按需加载和懒加载的方式，它只会加载当前需要用到的组件和样式，相比大型 UI 组件库，体积更小、加载速度更快。
better-ui 认识
安装
better-ui 目前已经发布到 npm 上，可以通过 npm 或 yarn 安装：
// npm npm i better-ui -S // yarn yarn add better-ui
如需要按需引入，还需安装 babel-plugin-import：
// npm npm i babel-plugin-import -D // yarn yarn add babel-plugin-import -D
使用
在项目中引入 better-ui：
import Vue from 'vue'; import BetterUI from 'better-ui'; import 'better-ui/dist/better-ui.css'; Vue.use(BetterUI);
按需引入：
-- -------------------- ---- -------
-- --------
-
---------- -
---------- -
-------------- ------------
-------------------------- ------
------------- ------ -- -
------ -----------------------
-
--
-
-
-- ------
------ - ------ - ---- ------------
-- ------
------ - ------- ----- - ---- ------------主题定制
better-ui 提供了一套完整的主题定制方案，允许您通过修改变量或编写样式的方式自定义主题。变量文件在 src/styles/variables.scss 中，您可以自由修改其中的变量。如果您需要覆盖或扩展样式，可以在 src/styles/custom.scss 中进行编写，这样可以保证升级时不会产生冲突。更多主题定制方法详见官方文档。
示例代码
下面是一个使用 better-ui 的简单示例：
-- -------------------- ---- -------
----------
-----
------- -------------- --------------------------------
------ ------------------
----------------
--------
------
-----------
--------
------ - ------- ----- - ---- ------------
------ ------- -
----------- -
-------
------
--
------ -
------ -
-------- ------
--
--
-------- -
----------- -
------------ - -----
--
--
--
---------
-------
-- ----- --
--------------- --------
------- --------------------------------
--------更多示例可参见官方文档：https://github.com/better-ui/better-ui
总结
better-ui 是一款优秀的，具有很高扩展性的 Vue.js UI 组件库，具有丰富的组件、小巧的体积、易用的接口以及强大的主题定制能力。在您的下一个项目中，不妨尝试使用一下！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc381e8991b448e641c