在前端开发中，使用现有的框架和库可以大大提高工作效率。element-react 是一个基于 React 的 UI 组件库，提供了丰富的组件和样式，能够快速构建漂亮的网页界面。
安装
要使用 element-react，首先需要安装它。可以使用 npm 命令进行安装：
npm install element-react --save
此命令会将 element-react 包及其依赖项下载并保存到项目目录下的 node_modules 文件夹中。
引入
在使用 element-react 之前，需要先引入样式文件和 JavaScript 文件。可以在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="https://unpkg.com/element-react/umd/theme-default/index.min.css"> <script src="https://unpkg.com/react/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/element-react/umd/index.min.js"></script>
这里使用了 CDN 引入，也可以直接在项目中使用本地文件。
使用
引入后，就可以开始使用 element-react 的组件了。以 Button 为例，以下是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- ----------------
-------- ----- -
------ -
-----
------- ----------------------------
------
--
-
-------------------- --- ---------------------------------以上代码中，使用了 ES6 的模块化语法引入了 Button 组件，并在 App 组件中使用了它。
配置主题
element-react 提供了多种主题样式供选择。可以在 index.js 文件中设置主题：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- ----------------
------ ------------------------
-------- ----- -
------ -
-----
------- ----------------------------
------
--
-
-------------------- --- ---------------------------------此时，页面上的组件将会显示为默认主题样式。
总结
本文介绍了如何安装、引入和使用 element-react。通过学习本文，读者可以快速掌握 element-react 的基本用法，从而在项目开发中更加高效地使用这个 UI 组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43891