Element基础

最新推荐文章于 2024-05-22 18:10:50 发布
最新推荐文章于 2024-05-22 18:10:50 发布
阅读量4.7k 收藏 68
点赞数 10
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LP_5371/article/details/107120575
版权

Element 基本使用

Element 介绍

  • Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。

  • 使用 Element 前提必须要有 Vue。

  • 组件：组成网页的部件，例如 超链接、按钮、图片、表格等等~

  • Element 官网：https://element.eleme.cn/#/zh-CN

  • 自己完成的按钮
    在这里插入图片描述

  • Element 提供的按钮
    在这里插入图片描述

Element 快速入门

  1. 下载 Element 核心库。
  2. 引入 Element 样式文件。
  3. 引入 Vue 核心 js 文件。
  4. 引入 Element 核心 js 文件。
  5. 编写按钮标签。
  6. 通过 Vue 核心对象加载元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>
    </div>
</body>
<script>
    new Vue({
    
        el:"#div"
    });
</script>
</html>
Element 常用组件

布局方式

  • 基础布局：将页面分成最多 24 个部分，自由切分。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-row {
    
            /* 行距为20px */
            margin-bottom: 20px;
        }
        .bg-purple-dark {
    
            background: red;
        }
        .bg-purple {
    
            background: blue;
        }
        .bg-purple-light {
    
            background: green;
        }
        .grid-content {
    
            /* 边框圆润度 */
            border-radius: 4px;
            /* 行高为36px */
            min-height: 36px;
        }
      </style>
</head>
<body>
    <div id="div">
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"
最低0.47元/天 解锁文章
LP_5371
关注
  • 10
    点赞
  • 踩
  • 68
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI入门和NodeJS环境搭建
weixin_44557427的博客
08-26 364
一、关于 ElementUI 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网：http://element-cn.eleme.io/#/zh-CN ElementUI ---实践...
Element概述、入门案例及布局
m0_61961937的博客
05-31 7197
Element概述、入门案例及布局简单示例
Element介绍&使用
rch041126的博客
03-23 2470
文章目录Element概述一、Element快速入门二、Element布局三、Element常用组件 Element概述 一、Element快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">
【Element入门】3、Element UI 表单组件详解
weixin_52938153的博客
05-22 1295
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
ElementUI基本介绍及登录注册案例演示
ChatYU的博客
09-24 5780
Element UI 是一个基于 Vue.js 的开源前端框架，用于构建用户界面。它提供了一套丰富的 UI 组件和工具，可以帮助开发者快速构建现代化的 web 应用程序。基于 Vue.js：Element UI 是专门为 Vue.js 框架设计的，因此与 Vue.js 集成非常紧密。这使得开发者可以轻松地将 Element UI 的组件嵌入到他们的 Vue.js 应用程序中。丰富的 UI 组件：Element UI 提供了一系列常用的 UI 组件，包括按钮、表单、对话框、导航菜单、数据表格、图表等等。
vue组件Element 的简单介绍与使用
2301_78874406的博客
12-22 2216
在Vue中，组件是一个重要的概念，它是一个可复用的Vue实例，拥有独一无二的组件名称。组件可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。封装性：组件封装了HTML、CSS和JavaScript等代码，使其成为一个独立的模块，提高了代码的可维护性和复用性。独立性：组件可以独立存在，也可以在其他组件或页面中使用，只要注册了组件名称就可以重复使用。属性：组件可以有自己的属性，通过属性可以接收外部传递的数据或配置项。
ElementUI介绍
工地小张
09-28 348
CGB2105-Day11 闪耀太阳 2021-08-04 10:07:09 288...
element.zip
07-02
`vue.js` 文件可能是 Vue 的核心库，包含了 Vue 的基础功能。而 `vue@2.6.11.js` 是 Vue 的特定版本，这里的 `2.6.11` 表示该文件对应的是 Vue 2.6.11 版本。Vue 2.x 是 Vue 的一个主要版本，支持组件化开发，虚拟 ...
element.rar
07-21
- 布局（Layout）：如 Container、Row 和 Column，用于构建页面的基础结构。 - 表单（Form）：包括 Input、Select、Checkbox、Radio、DatePicker 等，用于用户输入和数据选择。 - 数据展示（Data Display）：如 ...
element2.0.7
09-11
1. **组件丰富**：Element 提供了诸如按钮、表单、表格、对话框、通知、布局等基础组件，还有如时间选择器、日期选择器、颜色选择器等高级组件，几乎涵盖了网页开发中的所有常见需求。 2. **响应式设计**：Element ...
element-2.4.6
02-05
首先，Element UI 提供了诸如表格、按钮、输入框、通知、对话框等基础组件，这些组件都是预先设计和实现的，开发者可以快速地将它们集成到项目中，节省大量的开发时间。例如，表格组件支持动态加载、排序、过滤和...
vue+element ui 基础的后台管理系统模板
12-03
在这个“vue+element ui 基础的后台管理系统模板”中，我们可以学习到以下关键知识点： 1. **Vue.js基础**： - **Vue实例**：每个Vue应用始于一个Vue实例，它是一个包含数据、方法、生命周期钩子的对象。 - **...
Vue-02-笔记
qq_24410589的博客
06-14 665
Element 基本使用 1、Element介绍 2、Element快速入门 3、基础布局 4、容器布局 5、表单组件 6、表格组件 7、顶部导航栏组件 8、侧边导航栏组件 9、小结 Element 基本使用 1、Element介绍 Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。 使用Element前提必须要有Vue。 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~ Element官网：https://element.eleme.cn/#/zh-
ElementUI组件库
影子
08-17 7138
官网：https://element.eleme.cn/#/zh-CN/component/installation npm 安装 推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。 npm i element-ui -S CDN 目前可以通过unpkg.com/element-ui获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesheet" href=...
Element
书启鸿蒙知秋枫
08-05 1050
如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。用于布局的容器组件，方便快速搭建页面的基本结构。，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。，在下面就会展示出对应的代码，显示出的代码中有样式，有html。栏，根据页面要求给每一列设置所占的栏数。，然后找到自己喜欢的按钮样式，点击。，然后找到自己喜欢的按钮样式，点击。将样式拷贝我们自己页面的。.
Element基本使用
Major_S的博客
01-31 1367
Spring注解
Element官网
Gordennizaicunzai的博客
03-14 8718
写在前面的 暖色篇 过渡篇 冷色篇 总结 写在前面的  首先，这篇文章是WEB前端设计中经常用到的比较好看的一些颜色，当然对色盲或者色弱的小伙伴们来说那是相当不友好。因为，即使是色觉正常的人来讲，长时间的调试颜色，也会让眼睛的感色细胞处于疲劳状态，也就是对于颜色“傻傻分不清”了，这种情况就更不要提色盲和色弱的人了，好了，话不多说，大家就尽情挑选自己喜欢的颜色吧！ 暖色篇 Color Show Code 桃色 ■■■ f58f98 薄柿 ■■■ ca8687 ...
elementUi——适合于Vue的UI框架
热门推荐
mapbar_front的博客
01-19 10万+
简介element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。Layout布局（el-row、el-col）element-ui借用了bootstrap框架的思想，使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下<el-row> <el-col :span="6"><div class="grid-content bg-
无法访问https://element.eleme.cn和https://element.eleme.io
qq_27577113的博客
11-21 2026
2.进行第一步处理后，会发现还是无法访问element.eleme.cn，这个时候点开f12开发者模式，查看浏览器的请求记录，发现报了一个错，vue is undefined，查看网络请求发现一个关于vue文件的获取请求失败了，这个时候去复制该链接，直接访问一下，发现报一样的错，直接通过下方显示的链接访问或者按照刚才的处理步骤，再处理一遍就行了，然后回去elementui页面，点击刷新页面就能正常访问了。或者在该页面空白部分直接键入thisisunsafe+回车访问，直接按键盘就行，不用在地址输入。
element minio
最新发布
06-05
Element MinIO是一个开源的分布式对象存储系统，支持Amazon S3 API。它可以在常规硬件基础上构建高性能、可扩展的私有云存储服务，同时还提供了很多有用的特性，如数据加密、访问控制、高可用等。Element MinIO主要用于处理大规模数据的存储、分发和保护，因此在云计算和大数据场景下得到广泛应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值