简介
bon-etat 是一个基于 Vue.js 的前端组件库，提供了丰富的 UI 组件和工具函数，可以帮助前端开发人员快速构建优雅、易用的 Web 应用程序。使用 bon-etat 可以大大提高前端开发效率，减少重复代码编写，同时也可以保证应用程序的一致性和高质量。
安装
前往 npm 官网查看最新的 bon-etat 包版本，然后在项目目录下执行以下命令：
npm install bon-etat
使用
使用 bon-etat 的方式主要有两种：
1. 全局引入
在 main.js 文件中加入以下代码：
import Vue from 'vue'; import BonEtat from 'bon-etat'; import 'bon-etat/dist/bon-etat.css'; Vue.use(BonEtat);
这样就可以在项目中使用 bon-etat 了，例如：
-- -------------------- ---- -------
----------
-----
---------- -------------- -----------------------------------
--------- --------------- -------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
-
--
-------- -
------------- -
---------------------------- -----------
-
-
-
---------2. 按需引入
如果你只需要使用 bon-etat 的部分组件或工具函数，可以按需引入，可以通过下面方式达到按需引入的效果：
// 引入组件
import { BeButton, BeInput } from 'bon-etat';
Vue.component('BeButton', BeButton);
Vue.component('BeInput', BeInput);
// 引入工具函数
import { formatTime } from 'bon-etat';
console.log(formatTime(new Date()));需要注意的是，在按需引入时，需要手动引入样式文件，例如：
@import "bon-etat/dist/bon-etat.css";
示例代码
BeButton
-- -------------------- ---- -------
----------
-----
---------------------------
---------- -------------------------------
---------- -------------------------------
---------- -------------------------------
---------- ------------------------------
------
-----------BeInput
<template>
<div>
<be-input v-model="value" placeholder="请输入内容"></be-input>
</div>
</template>formatTime
import { formatTime } from 'bon-etat';
console.log(formatTime(new Date())); // '2021-05-16 12:34:56'总结
bon-etat 是一个非常实用的前端组件库，它提供了丰富的组件和工具函数，可以帮助前端开发人员快速构建 Web 应用程序，提高开发效率和代码质量。使用 bon-etat 能够使开发工作更加轻松愉快，同时也有助于提高团队的协作效率。因此，在开发 Web 应用程序时，不妨考虑使用 bon-etat 这样的优秀 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4c8d