AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue好看的组件库：Element

2024-01-25 367
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Element UI 提供了一套丰富的可复用组件，可以快速构建漂亮的网页界面和 Web 应用程序。它包含了常见的表单、表格、对话框、导航、菜单等组件，同时也提供了一些常用的工具函数和样式。Element UI 的设计风格简洁、美观，易于使用和定制，因此在 Vue.js 开发的项目中被广泛应用。

1、什么是Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

image-20240124182555333

我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是

https://element.eleme.cn/#/zh-CN

进入官网能看到如下页面

image-20210831171456559

接下来直接点击 组件 ，页面如下

image-20210831171552844

2、Element快速入门

使用流程：

  1. 创建页面，并在页面引入Element 的css、js文件 和 Vue.js

    <script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

  2. .创建Vue核心对象

    Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

    <script>
    new Vue({
      
      
        el:"#app"
    })
</script>

  3. 官网复制Element组件代码

    image-20210831180730287

    在左菜单栏找到 Button 按钮 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器布局</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../element-ui/lib/index.js"></script>


</head>
<body>
    <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>

        <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>

        <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>

        <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>

3、Element布局

Element 提供了两种布局方式，分别是：

  • Layout 布局
  • Container 布局容器
3.1、 Layout 局部

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

image-20210831182349672

在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础布局</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <style>
        .el-row {
    
    
            margin-bottom: 20px;
            &:last-child {
    
    
                margin-bottom: 0;
            }
        }
        .el-col {
    
    
            border-radius: 4px;
        }
        .bg-purple-dark {
    
    
            background: #99a9bf;
        }
        .bg-purple {
    
    
            background: #d3dce6;
        }
        .bg-purple-light {
    
    
            background: #e5e9f2;
        }
        .grid-content {
    
    
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
    
    
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </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"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

    </div>
</body>
<script>
    new Vue({
    
    
        el:"#div"
    });
</script>
</html>
3.2、容器布局

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

如下图是官网提供的 Container 布局容器实例：

image-20210831183433892

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器布局</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../element-ui/lib/index.js"></script>

    <style>
        .el-header, .el-footer {
    
    
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
    
    
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
    
    
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
    
    
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
    
    
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
    
    
            line-height: 320px;
        }
    </style>
</head>
<body>
    <div id="div">
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
        </el-container>

        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>

        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>

        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>

        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-container>
                    <el-main>Main</el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>

        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
            </el-container>
        </el-container>

        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</body>
<script>
    new Vue({
    
    
        el:"#div"
    });
</script>
</html>
文章标签：
JavaScript
容器
前端开发
关键词：
组件库VUE.js
VUE.js组件
element VUE.js
vue element VUE.js
VUE.js element
小小小林
目录
相关文章
程序员彭于晏
|
27天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
28 1
大树营养快线
|
29天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
31 2
光明顶阳顶天
|
24天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
126 64
阿里巴巴叫我来巡山
|
3天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
40 17
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
36 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
26 1
vue学习第三章
mao29955
|
24天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
29 8
光明顶阳顶天
|
24天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
39 2
九月天空
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
24 1
G0518
|
27天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
29 1

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 3
    vue之webpack打包原理和用法详解
  • 4
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 5
    【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
  • 6
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 7
    VUE3中watch与watchEffect —— 全网最详细系列
  • 8
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 9
    中文代码示例之Vuejs入门教程(一)
  • 10
    新建Vue项目
  • 1
    使用Vue.js构建交互式前端的技术探索
    89
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    168
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    150
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    184
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • jQuery开发教程
  • React 入门教程开发文档
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks