前言
在前端开发中，我们经常会使用一些 UI 组件库来方便开发。piger-ui 是一个基于 Vue.js 的 UI 组件库，可支持 Vue 2.0 及以上版本。本文将介绍如何使用 npm 包的形式来安装和使用 piger-ui，帮助初学者快速掌握使用该组件库的方法，并提供示例代码。
安装
安装方式很简单，只需要在终端中输入以下命令即可：
npm install piger-ui --save
使用
全局引入
在 main.js 中引入 piger-ui 并注册：
import PigerUI from 'piger-ui' import 'piger-ui/dist/piger-ui.css' Vue.use(PigerUI)
在 App.vue 中使用任意组件：
<template>
<div>
<piger-button>Click me</piger-button>
</div>
</template>按需引入
如果你只需要使用部分组件，则可以按需引入。安装 babel-plugin-component，然后在 babel 配置中添加：
plugins:
[
['component', {
libraryName: 'piger-ui',
styleLibraryName: 'piger-ui/dist/css',
camel2DashComponentName: false
}]
]在需要使用的组件中引入：
import { PigerButton } from 'piger-ui'
export default {
components: {
PigerButton
}
}在 App.vue 中使用：
<template>
<div>
<piger-button>Click me</piger-button>
</div>
</template>组件列表
piger-ui 包含了多种常用的 UI 组件，以下是部分组件的使用示例：
PigerButton
-- -------------------- ---- -------
----------
-----
------------------------------------
------------- -------------------------------------
------------- -------------------------------------
------------- -------------------------------------
------------- -----------------------------------
------------- --------------------------------
------
-----------PigerInput
-- -------------------- ---- -------
----------
-----
------------ -------------------- ----------------- -------------------------
-- ---------- --
------
-----------
--------
------ ------- -
---- -- -
------ -
----------- --
-
-
-
---------PigerRadio
-- -------------------- ---- -------
----------
-----
------------ -------------------- ---------------- ---------------
------------ -------------------- ---------------- ---------------
-- ---------- --
------
-----------
--------
------ ------- -
---- -- -
------ -
----------- --
-
-
-
---------结语
piger-ui 是一个非常实用的 UI 组件库，能够极大地提高前端开发效率。通过本文的介绍，相信大家已经掌握了如何使用该组件库的方法，也对按需引入有了更深入的了解。希望这篇文章对大家有所帮助，谢谢。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733f890c4f7277583670