Element UI（桌面组件库）之 三大灵魂拷问
1. 什么是Element UI
- 概述
- Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- Element UI是基于Vue 2.0的
- Element UI 提供一组组件
- Element UI 提供组件的参考实例, 直接复制
- element-ui是饿了么团队开发的 基于mvvm的vue开源出来的一套前端ui框架。
官方网站：
https://element.eleme.cn/#/zh-CN/component/installation
Element Plus 基于Vue 3.0 组件
2. Element UI能做什么？
- element-ui可以在vue中使用，也支持react 和angular 开发。
- element-ui 可以按需找到组件，引入使用。有的组件是我们开发中经常要用到的。
- 自己使用系统原生的远远满足不了需求，二次开发不仅麻烦，而且难度大，使用这些ui框架可以大大降低开发难度。
- element-ui交互体验好；即使是复杂的表单操作，反馈也非常清楚，操作简洁直观；易上手，码示例很充足。功能有：自定义主题，内置过渡动画。组件有 布局容器，按钮，和form表单，上传文件，表格 ，弹框提示，菜单，以及走马灯等等常用的组件。
——页面指南
—— vue功能结构示例
3. Element UI 如何使用？
—— 此处在vue中示例
3.1搭建环境
- 创建vue项目：通过vue-cli创建项目
创建项目命令：vue create 项目名
运行项目命令：npm run serve
2. 整合插件
安装好vue项目后，进入到项目目录，执行命令：vue add element
- 整合步骤1：确定引入方式（全部引入、按需引入）
—— 注：空格视为选中，enter为进入下一选项
4. 简单使用element UI 组件！
布局容器
- 使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）
- 官方文档 : https://element.eleme.cn/#/zh-CN/component/container
——示例图：
步骤一: 修改src/main.js 调整 element-ui 导入位置
步骤二: 修改 src/App.vue所有内容,将App.vue中所有样式删除， 配置一级路由
步骤三：编写Home.vue页面，添加布局容器
- 路由配置
const routes = [{path: '/',name: '首页',component: () => import('../views/Home.vue')} ]
页面编写—— 在element ui 官方网站链接在找到布局容器，复制相对应代码样式即可
<template><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container>
</template><script>
export default {}
</script><style>/* 稍后删除 */.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}
</style>- 布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式【reset.css】
步骤一: 百度搜索”reset.css” , 并创建 assets/reset.css ,拷贝样式 (复制下面样式即可
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {margin: 0;padding: 0;
}table {border-collapse: collapse;border-spacing: 0;
}fieldset,img {border: 0;
}address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;font-weight: normal;
}
ol,ul {list-style: none;
}caption,th {text-align: left;
}h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}重置样式参考：CSS Reset（样式重置） - weizhxa - 博客园
步骤二: 修改 src/main.js 导入 reset.css 样式
- 满屏填充
步骤1：修改在App.vue中，设置html外层标签的高度为100%
html, body, #app {height: 100%;}
步骤2：修改Home.vue，设置外部容器的高度为100%
/* 设置容器的高度 */.el-container {height: 100%; }
注：可根据自己需求复制组件，编写页面，多个组件之间亦可以相互组合使用。
element ui 组件代码，建议复制粘贴，不建议手写。因为简单的代码尚可手写，但随着页面的复杂，代码量会越来越多，手写代码样式，会浪费大量时间。所以element-ui组件建议复制粘贴。
Element UI（桌面组件库）之 三大灵魂拷问相关推荐
- 实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...
- 实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值 新建父组件和子组件 新建父组件 代码如下 <template><div id=& ...
- Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
- element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
- 响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码 懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
- element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档 注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
- element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
- element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
- element ui upload组件文件上传一次 后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
最新文章
- Chrome浏览器取代火狐的十大理由
- dom复制cloneNode节点与插入节点appendChild()
- 小游戏专场：腾讯云Game-Tech技术沙龙上海站顺利落下帷幕
- 数据库查询某一列大写转化小写字母表示_基于MySQL数据库下亿级数据的分库分表...
- 简单安装和yum安装的区别
- linux下查询日志sed与或非,Linux命令之sed命令使用介绍
- jupyter报错Invalid credentials
- java三种循环结构的关键字,Java循环结构_常量_关键字
- Latex符号查询网站
- STM32用热敏电阻测温
- IOS逆向分析—终极详细（一）
- 2019年互联网裁员名单
- 人工智能的发展历史概览
- 2022最新鸽哒IM即时通讯系统源码+带安装教程
- 第一位让我敬佩的学者张维迎
- 实现多数据源混合计算的方案之一
- android+蓝牙遥控器,一种通过蓝牙遥控安卓设备的方法与流程
- 详细的介绍sigmoid函数
- 全要素分析与问题解决：以人为本，主次分明
- ASP.NET MVC3实践