简介
wiser 是一个基于 Vue3 的 UI 组件库。它提供了丰富的组件和样式，能够帮助开发者快速构建漂亮的前端界面。使用 wiser，开发者可以减少开发时间和工作量，同时提升用户体验。
安装 wiser
在使用 wiser 之前，需要先安装它。使用 npm 命令安装：
npm install @wiser/wiser
使用 wiser
在安装完成之后，可以在你的项目中引入 wiser 组件。在 Vue 的入口文件中，引入并注册 wiser 组件库：
import { createApp } from 'vue'
import App from './App.vue'
import Wiser from '@wiser/wiser'
createApp(App).use(Wiser).mount('#app')这样就可以在项目中使用 wiser 组件了。
基础组件
wiser 提供了许多常用的 UI 组件，包括按钮、表单、标签、图标等等。这些组件都已经经过优化和测试，可以直接在项目中使用。
按钮
使用 wiser 的按钮，首先需要导入 Button 组件，然后在模板中调用：
-- -------------------- ---- -------
----------
-----
-----------------------
-------- -----------------------------
-------- -----------------------------
-------- -----------------------------
-------- ----------------------------
-------- --------------------------
------
-----------
--------
------ - ------- - ---- --------------
------ ------- -
----------- -
-------
-
-
---------其中，type 属性用于设置按钮的类型，包括 primary（主要）、success（成功）、warning（警告）、danger（危险）和 text（文本）。也可以使用 size 属性设置按钮的大小，包括 small（小）、medium（中）和 large（大）。
表单
wiser 的表单组件包括输入框、选择器、单选框、多选框和日期选择器等。这些组件都提供了丰富的选项和事件，可以满足大多数的表单需求。
-- -------------------- ---- -------
----------
-----
------- -------------------- ------------------ --
-------- ---------------- ------------------------ --
------- ---------------- ------------------------ --
---------- ---------------- ----------------------- --
------------ -------------- --
------
-----------
--------
------ - ------- -------- ------- ---------- ----------- - ---- --------------
------ ------- -
----------- -
-------
--------
-------
----------
-----------
--
------ -
------ -
--------- ---
------- ---
-------------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- -
--
------- ---
------------- -
- ------ ------- ------ ------ --
- ------ ------ ------ ----- --
- ------ ----- ------ ------------ --
- ------ ------ ------ -------- --
- ------ -------- ------ ------- --
- ------ ---------- ------ --------- -
--
----- --
-
-
-
---------其中，WInput 组件用于输入框，WSelect 组件用于下拉选择器，WRadio 组件用于单选框，WCheckbox 组件用于多选框，WDatePicker 组件用于日期选择器。这些组件都可以使用 v-model 指令实现双向绑定，从而实时更新数据。
图标
wiser 通过集成阿里巴巴矢量图标库，提供了大量的图标选择。可以通过 Icon 组件的 name 属性设置图标的名称，如下所示：
-- -------------------- ---- -------
----------
-----
------ ----------------- --------- --
------ ------------------- --
------ -------------------- --
------ ----------------- --
------
-----------
--------
------ - ----- - ---- --------------
------ ------- -
----------- -
-----
-
-
---------其中，size 属性用于设置图标的大小。
高级用法
除了基础组件外，wiser 还提供了许多高级用法和特性，包括样式管理、国际化、自定义主题和组件扩展等。这些用法需要一定的 Vue 和 CSS 技能，但能够帮助开发者进一步优化和定制界面。
样式管理
wiser 的样式通过 CSS 打包在组件库中。如果需要修改组件的样式，可以通过覆盖 CSS 变量或添加额外样式的方式来实现。例如，为按钮组件添加背景颜色：
-- -------------------- ---- ------- -- ---- -- ----- - ----------------- -------- - -- ---- -- ----- - ----------------- -------- -
其中，:host 伪类用于表示当前组件的根元素。可以通过修改 --w-btn-bg-color 变量，来修改按钮的背景颜色。也可以通过添加背景颜色，来设置按钮所在的上层元素的背景颜色。
国际化
wiser 兼容 vue-i18n，可以实现界面的多语言支持。在项目中引入 vue-i18n，并注册语言包：
-- -------------------- ---- -------
------ - --------- - ---- -----
------ --- ---- -----------
------ ----- ---- --------------
------ ------- ---- ----------
----- -------- - -
--- -
------ --------
-------- -------- -- -- --------
--
--- -
------ -----
-------- ----------
-
-
----- ---- - --- ---------
------- -----
--------
--
-------------------------------------------------其中，locale 属性用于设置默认语言，messages 属性是语言包对象。通过 $t 方法，可以在模板中调用语言包中的文本：
<template>
<div>
<WButton>{{ $t('hello') }}</WButton>
<p>{{ $t('welcome') }}</p>
</div>
</template>自定义主题
wiser 支持自定义主题，可以通过修改 CSS 变量或添加额外样式的方式，来实现界面的定制。例如，为按钮组件添加新的主题：
/* 添加新的主题 */
:host(.w-btn-wiser) {
--w-btn-bg-color: #007aff;
--w-btn-border-color: #007aff;
--w-btn-hover-bg-color: #006be0;
--w-btn-hover-border-color: #006be0;
}通过添加 .w-btn-wiser 类名，来给按钮组件添加新主题。可以通过修改 --w-btn-bg-color 、--w-btn-border-color 、--w-btn-hover-bg-color 和 --w-btn-hover-border-color 变量，来修改按钮的颜色。
组件扩展
wiser 是基于 Vue3 开发的组件库，可以与 Vue3 的生命周期钩子、渲染函数、组合式 API 以及其他 Vue 相关特性进行配合使用，从而实现更强大的组件功能。例如，为表单组件添加自定义校验规则：
-- -------------------- ---- -------
------ - ---------------- --- - ---- -----
------ - ------ - ---- --------------
------ ------- -----------------
----- --------------
-------- -------
------ -
----------- -
----- -------
-------- --
-
--
------------ -------- -
----- -------- - ---------
----- -------- - -- -- -
----- ----- - --------------
----- ---- - --- ------------------------
----- ----- - ----------------
------------------------ ------
------ -----
-
------ -
---------
--------
-
-
--通过 extents 关键字，来继承 WInput 组件，并扩展新的校验规则。在 setup 中，定义校验函数 validate ，并通过 props 和 context 访问组件的属性和事件。可以通过 emit 方法来触发 validate 事件，并返回校验结果。最后，将扩展后的组件作为独立的通用组件，与 wiser 其他组件配合使用。
总结
wiser 是一个优秀的 Vue3 UI 组件库，提供了丰富的组件和样式，可以帮助开发者快速构建漂亮的前端界面。本文介绍了 wiser 的基础组件和高级用法，包括样式管理、国际化、自定义主题和组件扩展等。通过学习 wiser，可以提升前端开发能力，快速构建高质量的前端界面。
示例代码
完整示例代码可以参考 GitHub 上的 wiser 仓库：https://github.com/wisesaas/wiser
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe3bc