React项目如何使用Element ui？

最新推荐文章于 2024-05-11 10:07:12 发布
最新推荐文章于 2024-05-11 10:07:12 发布
阅读量1.2w 收藏 27
点赞数 8
分类专栏： react js 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48653480/article/details/108980597
版权
js 同时被 2 个专栏收录
21 篇文章 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即可
在这里插入图片描述
如果引用其他组件也报错，解决方式如上

果冻~
关注
  • 8
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
在 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-ElementReact使用React编写的Element
08-15
Element React：使用React编写的Element，Element是用Vue编写的，并且拥有许多优雅的UI组件。这个项目是用React重写Element。
推荐使用：Element React - Vue优雅UI组件的React实现
最新发布
gitblog_00010的博客
05-11 573
推荐使用：Element React - Vue优雅UI组件的React实现 项目地址:https://gitcode.com/ElemeFE/element-react Element React 是由ElemeFE开发团队为React社区精心打造的一款UI库，它是基于Vue的著名组件库Element的React版本。这个开源项目旨在让React开发者能够享受到和Vue开发者一样的优雅界面体验。...
React框架使用Element ui 组件
Web_chicken的博客
05-26 4687
根据官方文档在 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项目中使用element-ui
qq_46051895的博客
11-02 1205
element-ui在react项目里的安装流程及报错的解决方法
react 使用element-ui
TO_Web的博客
07-22 482
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是...
element-react：元素UI
02-03
元素React 最初是用编写的，它具有许多优雅的...使用webpack时，您需要其他加载程序来使用element-react进行构建。 const webpack = require ( 'webpack' ) ; module . exports = { entry : { src : 'path/to/src'
:sparkles:Element UI表单设计及代码生成器-React开发
05-27
Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 简介 Element UI表单设计及代码生成器，可将生成的代码直接运行在...
element-ui table组件如何使用render属性的实现
01-19
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍： 类似于下面自定义表列的样式，...
React-admin:react+elementui+mongodb后台管理模板
04-28
React-admin react+elementui+mongodb后台管理模板
ReactElement
qq_42843126的博客
10-09 1903
React系列(2) ReactElement React.createElement做了什么 先判断config中内置props（key,ref,self,source）存在且有效，则赋值给新声明的变量 再将config中非内置的props 给新声明的props（key和ref不会跟其他config中的变量一起被处理，而是单独作为变量出现在ReactElement上。） 判断如果孩子节点为一个...
vue中的element-ui和react的element-ui
我的专栏
08-24 1054
​ 首先分享使用vue的一个后台管理系统网站的示例，里面的控件都是用element-ui做的。 https://cangdu.org/manage/#/ 读了一下它的源代码，深感有了element-ui 做UI太方便了，Android里做UI是多么的麻烦。 这里记录一下element-ui的官方地址，方便以后需要的时候查看。 ​
React学习笔记（一）：创建react项目并结合elementUI
濮家大少
10-14 1523
创建过程 命令行安装全局create-react-app脚手架工具 npm install -g create-react-app 在工作目录下创建项目 create-react-app my-demo 进入项目目录 cd my-demo 启动项目 npm start 这样，react项目就创建完成了,接下来安装elementui组件。 首先是安装 npm i elem...
推荐：Elemental UI - React与CSS的UI框架
gitblog_00075的博客
05-11 328
推荐：Elemental UI - React与CSS的UI框架 项目地址:https://gitcode.com/elementalui/elemental Elemental UI 是一款由React驱动并结合CSS的前端用户界面框架，由经验丰富的开发者@JedWatson 和 @JossMac 在Thinkmill公司共同打造。这个项目正处于积极开发中，并已初具规模，为您的应用提供美观且易用...
Vue.js 组件编码规范
腾讯全栈-ITCJF
10-26 1165
目标 本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性： 其它开发者或是团队成员更容易阅读和理解。IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能更容易使用现有的工具更容易实现缓存以及代码包的分拆 本指南为 De Voorhoede 参考 RiotJS 编码规范 而写。 目录 将 this 赋值给 component 变量使用
Elementui-React表单重置遇坑
qq_40942380的博客
12-14 304
之前学vue的时候使用element-ui做了一个后台项目，最近刚学完react，打算用函数式组件+hooks把之前的项目重做一遍，在表单重置的时候，使用**resetFields()**发现只是把校验的错误清掉了，输入框的文本还在。重置前：重置后：校验错误清掉了，但是文本没有清空。
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、付费专栏及课程。

余额充值