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组件建议复制粘贴。