Element UI（桌面组件库）之三大灵魂拷问

傷城~ 2023-09-30 08:59 63阅读 0赞

## **1. 什么是ElementUI** ##

*  **概述**
 *  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表单，上传文件，表格 ，弹框提示，菜单，以及走马灯等等常用的组件。

——页面指南

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

——vue功能结构示例

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## 3. Element UI 如何使用？ ##

—— 此处在vue中示例

### 3.1搭建环境 ###

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

> 创建项目命令：**vue create 项目名**
> 
> 运行项目命令：**npm run serve**

2. **整合插件**

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

##  ##

## 4. 简单使用element UI 组件！ ##

1.  ### **布局容器** ###
    
    1.  使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）
    2.  官方文档 : https://element.eleme.cn/\#/zh-CN/component/container

——示例图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

步骤一: 修改src/main.js **调整 element-ui 导入位置**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

步骤二: 修改 src/App.vue所有内容,将App.vue中所有样式删除， 配置一级路由

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

步骤三：编写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**】

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 7][] 步骤一: 百度搜索”reset.css” , 并创建 **assets/reset.css** ,拷贝样式 (复制下面样式即可

![a4f07dda3a0a4a628d2a0863f07d781c.png][]

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 - 博客园][CSS Reset_ - weizhxa -]

步骤二: 修改 src/main.js **导入 reset.css 样式**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

*  **满屏填充**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

步骤1：修改在App.vue中，设置html外层标签的**高度为100%**

html, body, #app {
        height: 100%;
      }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

步骤2：修改Home.vue，设置**外部容器**的高度为100%

/* 设置容器的高度 */
      .el-container {
        height: 100%; 
      }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_19_color_FFFFFF_t_70_g_se_x_16][]

### 注：可根据自己需求**复制**组件，编写页面，多个组件之间亦可以相互组合使用。 ###

#### element ui 组件代码，建议复制粘贴，不建议手写。因为简单的代码尚可手写，但随着页面的复杂，代码量会越来越多，手写代码样式，会浪费大量时间。所以element-ui组件建议复制粘贴。 ####

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2f43bab84b80465eb22af3d5d3555b7a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3cf601bac9b14f0faad6196d3690ea66.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/0463186a635245979294b9c205429e23.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/caf2501be3984c299310f3af8f3feb3b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/50d625bb317c4a8ba3285bd562921cc9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/9f1d9ee01a7c4a5e94de343bca74f376.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/cc184b16b9ac4a82886cade025a29daf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/ba26ac7d29bf4710ac8715e655164abe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[a4f07dda3a0a4a628d2a0863f07d781c.png]: https://img-blog.csdnimg.cn/a4f07dda3a0a4a628d2a0863f07d781c.png
[CSS Reset_ - weizhxa -]: https://www.cnblogs.com/weizhxa/p/9885329.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/c401a955f85e484697248577867dd34e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/651b6c6049214dbb8c683f3f54e9b984.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/29e7a0e12b8441f28e1b1244d3a36628.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fb9d6a42a1e14c21b84acd32f4f1cfd2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_19,color_FFFFFF,t_70,g_se,x_16