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

        ——页面指南

Element UI(桌面组件库)之 三大灵魂拷问_第1张图片

 ——  vue功能结构示例

Element UI(桌面组件库)之 三大灵魂拷问_第2张图片

3. Element UI 如何使用?

—— 此处在vue中示例

 3.1搭建环境

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

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

运行项目命令:npm run serve

    2.  整合插件

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

  •  整合步骤1:确定引入方式(全部引入、按需引入)

Element UI(桌面组件库)之 三大灵魂拷问_第3张图片

        —— 注:空格视为选中,enter为进入下一选项

Element UI(桌面组件库)之 三大灵魂拷问_第4张图片

4. 简单使用element UI 组件!

  1. 布局容器

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

                        ——示例图:

Element UI(桌面组件库)之 三大灵魂拷问_第5张图片

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

Element UI(桌面组件库)之 三大灵魂拷问_第6张图片

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

Element UI(桌面组件库)之 三大灵魂拷问_第7张图片

步骤三:编写Home.vue页面,添加布局容器

  • 路由配置
    const routes = [
      {
        path: '/',
        name: '首页',
        component: () => import('../views/Home.vue')
      }
    ]

页面编写—— 在element ui 官方网站链接在找到布局容器,复制相对应代码样式即可





  • 布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式【reset.css

Element UI(桌面组件库)之 三大灵魂拷问_第8张图片        步骤一: 百度搜索”reset.css” , 并创建 assets/reset.css ,拷贝样式 (复制下面样式即可

Element UI(桌面组件库)之 三大灵魂拷问_第9张图片

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 样式

Element UI(桌面组件库)之 三大灵魂拷问_第10张图片

  • 满屏填充

Element UI(桌面组件库)之 三大灵魂拷问_第11张图片

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

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

Element UI(桌面组件库)之 三大灵魂拷问_第12张图片

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

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

Element UI(桌面组件库)之 三大灵魂拷问_第13张图片

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

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

你可能感兴趣的:(#,Vue+Element,UI,ui,vue.js,elementui)