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搭建环境

1.  创建vue项目：通过vue-cli创建项目

创建项目命令：vue create 项目名

运行项目命令：npm run serve

    2.  整合插件

安装好vue项目后，进入到项目目录，执行命令：vue add element

•  整合步骤1：确定引入方式（全部引入、按需引入）

        —— 注：空格视为选中，enter为进入下一选项

4. 简单使用element UI 组件！

1. 布局容器

   1. 使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）
   2. 官方文档 : 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组件建议复制粘贴。