[JavaScript知识库]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组件建议复制粘贴。