随着前端开发的发展，UI 组件库成为了日常项目开发必不可少的一员。qiyun-el-ui 是基于 Element UI 的二次封装，具有更适合企业级项目的风格和功能。本文将为您介绍使用 qiyun-el-ui 的详细教程以及使用中的注意事项。
一、安装
在使用 qiyun-el-ui 之前我们需要先安装它。
使用 npm：
npm i qiyun-el-ui -S
使用 yarn：
yarn add qiyun-el-ui
二、引入
我们可以把整个组件库引入到项目中：
import Vue from 'vue'; import qiyunElUI from 'qiyun-el-ui'; import 'qiyun-el-ui/lib/theme-chalk/index.css'; Vue.use(qiyunElUI);
也可以按需引入组件。这里以按钮为例：
import { QyButton } from 'qiyun-el-ui';
import 'qiyun-el-ui/lib/theme-chalk/qy-button.css';
Vue.component(QyButton.name, QyButton);需要注意的是，按需引入时需要手动引入该组件对应的样式。
三、使用
组件引入完成后，我们可以在项目中使用 qiyun-el-ui 的组件。
<template>
<div>
<qy-button type="primary">Primary</qy-button>
</div>
</template>在此基础上，您也可以如常添加 Element UI 的组件，二者并无冲突。
四、注意事项
1. 样式引入
正如上述，按需引入组件的同时需要手动引入其样式，否则会引起 UI 样式失效。如果需要引入整个库的样式，只需一次全局引入即可。
2. 版本问题
qiyun-el-ui 因为内嵌了 Element UI，所以与 Element UI 的版本兼容性是需要注意的。在 Element UI 更新时，qiyun-el-ui 同样建议进行版本升级，以保证正常的使用。
3. 组件问题
qiyun-el-ui 对原有 Element UI 组件进行了封装，不仅有普通组件，还有一些更适用于企业级项目的特殊组件。因此，在使用 qiyun-el-ui 的特殊组件时，需要先阅读相应的文档，以确保使用正确。
五、结语
qiyun-el-ui 是一款优秀的企业级 UI 组件库，为我们的前端开发提供了更多的甚至是必要的选择。在使用时需要注意 qiyun-el-ui 的特点以及注意事项，才能发挥其最大的作用。
示例代码
-- -------------------- ---- -------
----------
-----
---------- ----------------------------------
--------- --------------- ------------ --------
---- --------------------------
--------
------- --------------------------
------- --------------------------
---------
-----------
------
-----------
--------
------ - --------- ------- - ---- --------------
------ --------------------------------------------
------ -------------------------------------------
------ ------- -
----------- -
---------
-------
-
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540bde