介绍
@jporto/vue-jedi 是一个 Vue 组件库，提供了一些常见的 UI 组件和工具类，可以帮助我们快速开发基于 Vue 的前端项目。其中包括表单元素、提示框、弹出框、进度条等等。
安装
在使用 @jporto/vue-jedi 的时候，我们需要先安装它。安装方式非常简单，直接使用 npm 命令即可：
npm install @jporto/vue-jedi
使用
安装好 @jporto/vue-jedi 之后，就可以在代码中引入它。这里我们以表单元素为例进行详细介绍。
引入组件
在需要使用表单元素的页面或组件中，我们需要先引入 @jporto/vue-jedi。在 Vue 单文件组件中，引入方式如下：
-- -------------------- ---- -------
----------
-----
----------- --------------- ----------- ----------------------------------
------
-----------
--------
------ - --------- - ---- -------------------
------ ------- -
----------- -
---------
--
------ -
------ -
------ --
--
-
--
---------在上面的代码中，我们首先使用 import 语句引入需要的组件。然后在 components 属性中将组件注册到当前的 Vue 实例中。
接着在模板中，我们使用 jedi-input 标签来调用组件。其中 v-model 属性用来绑定表单元素的值，并将值传递到 Vue 实例的 value 变量中。label 属性为表单元素添加标签，placeholder 属性则为未输入时显示的提示文字。
支持的组件
@jporto/vue-jedi 提供了多种常用的 UI 组件，这些组件都可以通过 import 语句进行引入。例如，如果需要使用 jedi-select 组件，可以按照以下方式引入：
-- -------------------- ---- -------
----------
-----
------------ --------------- ----------- ---------------------------------
------
-----------
--------
------ - ---------- - ---- -------------------
------ ------- -
----------- -
----------
--
------ -
------ -
------ ---
-------- -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- -
-
--
-
--
---------目前 @jporto/vue-jedi 支持的组件包括：
- JediButton 按钮
- JediInput 输入框
- JediSelect 下拉框
- JediRadio 单选框
- JediCheckbox 复选框
- JediTable 表格
- JediAlert 提示框
- JediMessage 消息提示
- JediNotification 通知
除了上面介绍的这些组件外，@jporto/vue-jedi 还提供了 jedi-config 和 jedi-utils 两个实用工具类，可以帮助我们快速开发前端项目。
总结
@jporto/vue-jedi 提供了一组常用的 UI 组件和实用工具类，可以大大提高前端项目的开发效率。在使用过程中，我们只需要按照上面的方法进行引入和调用即可。同时，我们也可以根据自己的需要去扩展和定制这些组件，从而更好地满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583cda