在前端开发中，我们经常需要使用许多组件化的 UI 库，以便快速构建出漂亮、易于维护的界面。evui 是一个比较优秀的 UI 组件库，它基于 Vue.js 框架开发，提供了一些常用的 UI 组件，并且支持按需加载，方便使用。
本篇文章将详细介绍如何使用 evui，包含以下内容：
- 安装 evui
- 按需引入组件
- 使用示例
一、安装 evui
在使用 evui 之前，首先需要安装它。我们可以通过以下命令进行安装：
npm install evui --save
安装完成之后，我们就可以在项目中使用 evui 了。
二、按需引入组件
evui 支持按需加载组件，这样可以减小项目的体积，加快页面加载速度。以下是按需加载组件的方式：
首先，在你的项目中安装 babel-plugin-component。
npm install babel-plugin-component --save-dev
然后，在 .babelrc 文件中添加如下配置：
-- -------------------- ---- -------
-
---------- -
-
------------
-
-------------- -------
------------------- -------------
-
-
-
-注意：如果你使用的是 vue-cli 3.x，那么你需要在
babel.config.js文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
------------------------------
--
-------- -
-
------------
-
-------------- -------
------------------- -------------
--
-------------------------------
------------------------------
-
-
-接着，在你需要使用某个组件的时候，你可以直接按如下方式进行引入：
import { Button } from 'evui'
import 'evui/lib/theme-chalk/index.css'
export default {
components: {
'el-button': Button
}
}上面的代码中，我们仅仅引入了 Button 组件，并且只使用了主题样式中的部分样式。
三、使用示例
在学习 evui 的过程中，我们可以通过实际的示例来加深理解。我们来看一个简单的表单验证页面的实现过程。
首先，在 HTML 中编写以下代码：
<template>
<div>
<input v-model="name" placeholder="请输入姓名"><br>
<input v-model="email" placeholder="请输入邮箱"><br>
<button @click="submit">提交</button>
<div v-show="showTips">{{tips}}</div>
</div>
</template>在 JavaScript 中，我们需要引入一些组件，具体如下：
-- -------------------- ---- -------
------ - ------- ----- --------- ----- - ---- ------
------ --------------------------------
------ ------- -
----------- -
------------ -------
---------- -----
--------------- ---------
----------- -----
--
---- -- -
------ -
----- ---
------ ---
--------- ------
----- --
-
--
-------- -
------ -- -
-- ------
-- ------------ -
------------- - ----
--------- - -------
------
-
-- ------------- -
------------- - ----
--------- - -------
------
-
-- ---------------------------------- -
------------- - ----
--------- - ---------
------
-
------------- - ----
--------- - --------
-
-
-在 CSS 中，我们可以根据自己的需要进行样式的定制。然后，我们就可以访问该页面，看一看表单验证是否生效了。
以上就是一个简单的 evui 的实践示例。希望能够在实际的项目中使用到 evui，并且能够更加深入地了解它的详细实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63550