React项目如何使用Element ui？

最新推荐文章于 2024-09-13 22:11:48 发布
最新推荐文章于 2024-09-13 22:11:48 发布
阅读量1.2w 收藏 27
点赞数 8
分类专栏： react js 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48653480/article/details/108980597
版权
js 同时被 2 个专栏收录
22 篇文章 0 订阅
订阅专栏
react
17 篇文章 0 订阅
订阅专栏

初次在react项目中使用element框架，碰到了一些很简单的问题，但是卡了很久才解决，写篇博客记录一下。

1、安装：

在项目目录下下载：
npm i element-react --save
npm install element-theme-default --save
在这里插入图片描述

注：element官网快速上手中有提到

2、全局引用

在项目跟录下的index.js中全局引入
在这里插入图片描述

3、在项目中引用你需要的element组件

可能会报错
在这里插入图片描述
解决方式：在项目中下载依赖npm install react-hot-loader@next --save即可

4、引入组件可能还会报错

例如如下我引入的是走马灯
在这里插入图片描述
如上报错，解决方式，引入Carousel即可
在这里插入图片描述
如果引用其他组件也报错，解决方式如上

果冻~
关注
专栏目录
在 React 中使用 element-ui
怪力马猴烧酒的博客
01-01 1万+
根据官方文档在 React 中使用 element-ui Step 1：npm 安装 npm i element-react --save Step 2：下载主题包 npm install element-theme-default --save Step 3：在 React 中使用 打开需要使用到 element-ui 的 jsx 文件，在头部添加 import React from 're...
React框架使用Element ui 组件
Web_chicken的博客
05-26 4758
根据官方文档在 React 中使用 element-ui Step 1：npm 安装 $ npm i element-react --save Step 2：下载主题包 npm install element-theme-default --save Step 3：在 React 中使用 import React, { Component } from "react"; import ReactDOM from "react-dom"; import { Button } from "element-r
react-ElementReact使用React编写的Element
08-15
Element React：使用React编写的Element，Element是用Vue编写的，并且拥有许多优雅的UI组件。这个项目是用React重写Element。
Element-React 安装和配置指南
最新发布
gitblog_07766的博客
09-13 494
Element-React 安装和配置指南 element-react Element UI 项目地址: https://gitcode.com/gh_mirrors/el/element-react ...
在react项目中使用element-ui
qq_46051895的博客
11-02 1491
element-ui在react项目里的安装流程及报错的解决方法
推荐使用：Element React - Vue优雅UI组件的React实现
gitblog_00010的博客
05-11 911
推荐使用：Element React - Vue优雅UI组件的React实现 项目地址:https://gitcode.com/gh_mirrors/el/element-react Element React 是由ElemeFE开发团队为React社区精心打造的一款UI库，它是基于Vue的著名组件库Element的React版本。这个开源项目旨在让React开发者能够享受到和Vue开发者一样的优...
react 使用element-ui
TO_Web的博客
07-22 512
1.在项目目录下下载： cnpm i element-react --save cnpm install element-theme-default --save 2.在项目中下载依赖npm install react-hot-loader@next --save cnpm install react-hot-loader@next --save
vue react git antd element-ui等图标
08-30
在前端开发领域，Vue、React、Git、Ant Design（简称antd）和Element UI是不可或缺的重要技术组件和框架。这些工具和服务极大地提升了开发效率，优化了用户体验，并推动了现代Web应用程序的发展。 1. Vue.js：Vue是...
:sparkles:Element UI表单设计及代码生成器-React开发
05-27
Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 简介 Element UI表单设计及代码生成器，可将生成的代码直接运行在...
element-react：元素UI
02-03
元素React 最初是用编写的，它具有许多优雅的...使用webpack时，您需要其他加载程序来使用element-react进行构建。 const webpack = require ( 'webpack' ) ; module . exports = { entry : { src : 'path/to/src'
react-daterange-picker:使用@ material-ui的React日期范围选择器。 现场演示
05-06
使用material-ui组件的React日期范围选择器。 现场演示： : 用法 npm install @matharumanpreet00/react-daterange-picker --save # or with yarn yarn add @matharumanpreet00/react-daterange-picker 基本范例 ...
react-elemental一个灵活的和漂亮的ReactjsUI框架
08-15
elemental - 一个灵活的和漂亮的React.js UI框架
React-admin:react+elementui+mongodb后台管理模板
04-28
React-admin react+elementui+mongodb后台管理模板
Element-React 使用教程
gitblog_00605的博客
08-07 537
Element-React 使用教程 element-reactElement UI项目地址:https://gitcode.com/gh_mirrors/el/element-react 项目介绍 Element-React 是一个基于 React 的 UI 组件库，最初由 Vue 版本的 Element UI 分叉而来，旨在为 React 社区提供优雅的 UI 组件。Element-Reac...
React Element介绍
qq_39237831的博客
07-14 537
React Element是React中的核心概念之一，它代表了React应用中的UI元素。React Element并不是真实的DOM节点，而是一个轻量级的、不可变的、描述性的对象，它包含了创建UI所需的类型（type）、属性（props）和子元素（children）等信息。React使用React Element来构建UI，并在内部通过虚拟DOM（Virtual DOM）来优化真实的DOM更新。
vue中的element-ui和react的element-ui
我的专栏
08-24 1110
​ 首先分享使用vue的一个后台管理系统网站的示例，里面的控件都是用element-ui做的。 https://cangdu.org/manage/#/ 读了一下它的源代码，深感有了element-ui 做UI太方便了，Android里做UI是多么的麻烦。 这里记录一下element-ui的官方地址，方便以后需要的时候查看。 ​
ReactElement
qq_42843126的博客
10-09 1954
React系列(2) ReactElement React.createElement做了什么 先判断config中内置props（key,ref,self,source）存在且有效，则赋值给新声明的变量 再将config中非内置的props 给新声明的props（key和ref不会跟其他config中的变量一起被处理，而是单独作为变量出现在ReactElement上。） 判断如果孩子节点为一个...
React学习笔记（一）：创建react项目并结合elementUI
濮家大少
10-14 1575
创建过程 命令行安装全局create-react-app脚手架工具 npm install -g create-react-app 在工作目录下创建项目 create-react-app my-demo 进入项目目录 cd my-demo 启动项目 npm start 这样，react项目就创建完成了,接下来安装elementui组件。 首先是安装 npm i elem...
Element-React 框架教程
gitblog_00393的博客
08-07 512
Element-React 框架教程 element-reactElement UI项目地址:https://gitcode.com/gh_mirrors/el/element-react 1. 项目目录结构及介绍 Element-React 的源码目录设计如下： . ├── build // 构建相关的脚本 ├── fileCodeFolders // 示例中的代码文件...
html页面引用react和element UI
05-31
要在HTML页面中使用React和Element UI，需要先在HTML页面中引入React和Element UI的相关文件，然后再编写React组件并使用Element UI组件。 下面是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React and Element UI Example</title> <!-- 引入Element UI的CSS文件 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="root"></div> <!-- 引入React和Element UI的JS文件 --> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> // 编写React组件 function App() { return ( <div> <el-button type="primary">Click me!</el-button> </div> ); } // 渲染React组件到HTML页面 ReactDOM.render(<App />, document.getElementById('root')); </script> </body> </html> ``` 在上面的例子中，我们先引入了Element UI的CSS文件，然后在body中定义了一个id为root的div元素用于渲染React组件。接着，我们引入了React和Element UI的JS文件，并编写了一个名为App的React组件，其中使用了一个名为el-button的Element UI组件。最后，我们通过ReactDOM.render()方法将App组件渲染到HTML页面中的root元素中。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值