介绍
@ibapt/icomp-core 是一个基于 Vue.js 的前端组件库，包含多个常用组件，以及预设了一些基础样式，可帮助开发者快速构建前端页面。
安装
在项目中使用 @ibapt/icomp-core，首先需要确保已经安装了 npm，然后使用以下命令安装：
npm install @ibapt/icomp-core --save
使用
在 Vue 项目中使用
在 main.js 中导入 @ibapt/icomp-core 并注册组件：
import Vue from 'vue'; import icompCore from '@ibapt/icomp-core'; Vue.use(icompCore);
之后就可以在组件中使用 icomp-core 的组件和样式了：
<template>
<div>
<i-comp-button type="primary">确认</i-comp-button>
</div>
</template>在其他项目中使用
如果需要在非 Vue 项目中使用 @ibapt/icomp-core，可以直接引入 icomp-core.css 文件，该文件包括了组件需要的样式。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
----- ---------------- ------------------------------------------------------------
-------
------
-----
------- -------------------- -----------------------------------
------
-------
-------组件列表
以下是 @ibapt/icomp-core 包含的常用组件：
i-comp-button
带有默认样式的按钮组件。
<i-comp-button>默认按钮</i-comp-button> <i-comp-button type="primary">主要按钮</i-comp-button> <i-comp-button type="success">成功按钮</i-comp-button> <i-comp-button type="warning">警告按钮</i-comp-button> <i-comp-button type="danger">危险按钮</i-comp-button> <i-comp-button round>圆角按钮</i-comp-button> <i-comp-button icon="el-icon-search">带图标按钮</i-comp-button>
i-comp-input
带有默认样式的输入框组件。
<i-comp-input placeholder="请输入内容"></i-comp-input> <i-comp-input type="textarea" placeholder="请输入内容"></i-comp-input>
i-comp-form
带有默认样式的表单组件。
-- -------------------- ---- -------
-------------
----------------- -----------
-----------------------------
-------------------
----------------- -----------
------------- -----------------------------
-------------------
------------------
-------------- ---------------------------------
-------------------
--------------i-comp-modal
带有默认样式的弹窗组件。
<i-comp-modal title="提示" v-model="showModal">
<p>这是一段提示文字</p>
<p slot="footer">
<i-comp-button @click="showModal = false">取消</i-comp-button>
<i-comp-button type="primary" @click="showModal = false">确认</i-comp-button>
</p>
</i-comp-modal>i-comp-tabs
带有默认样式的选项卡组件。
<i-comp-tabs v-model="activeTab"> <i-comp-tab-pane label="标签一">选项卡一的内容</i-comp-tab-pane> <i-comp-tab-pane label="标签二">选项卡二的内容</i-comp-tab-pane> <i-comp-tab-pane label="标签三">选项卡三的内容</i-comp-tab-pane> </i-comp-tabs>
总结
@ibapt/icomp-core 是一个基于 Vue.js 的前端组件库，包含多个常用组件和基础样式，可帮助开发者快速构建前端页面。通过本文的介绍，你可以了解如何安装和使用 @ibapt/icomp-core，以及包含的常用组件和示例代码。希望本文能对你学习和使用 @ibapt/icomp-core 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725781e8991b448e86fb