Element UI 实战教程

1、Element UI 引言

官网:https://element.eleme.cn/#/zh-CN/component/installation

1.1、官方定义

网站快速成型工具桌面端组件库

1.2、定义

element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面

1.3、由来

这是由现在很火的订餐app饿了么前端团队,基于vue开发的开源前端组件库,里面提供的全都是封装好的组件

2、安装Element UI

2.1、通过vue cli 脚手架创建项目

这里我是使用vue2.0版本的,如果想使用vue3.0的小伙伴可以去官网上查找快速上手的指南

搭建vue cli 脚手架

vue int webpack (项目名)

2.2、在vue cli脚手架项目中安装elementui依赖

官网提供npm安装&CDN在线库,这里我使用的是npm安装,因为现在很多企业开发都很少再去用CDN在线库,而且npm安装也能更好地和webpack打包工具配合使用(后面这句是官网原话)

npm安装

# 1、下载element ui的依赖
	npm i element-ui -S
	学过maven的小伙伴可以理解为导入dependency

# 2、指定当前项目中使用element ui  (在我们已经搭建好的vue cli脚手架项目中main.js中引入)
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	
	//在vue脚手架中使用element ui
	Vue.use(ElementUI)

3、按钮组件

按钮的使用

# 默认样式按钮
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

在这里插入图片描述

除此之外还有简洁按钮plain圆角按钮round图标按钮icon

总结:日后使用element ui 相关的组件时需要注意的是所有的组件都是el-名称开头的,并且所有的组件属性都是写在组件标签上

在这里插入图片描述

按钮属性的使用

<el-button type="primary" round icon="el-icon-success">主要按钮</el-button>

4、Link文字连接组件

4.1、文字连接组件的创建

<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

在这里插入图片描述

4.2、文字链接的属性

在这里插入图片描述

使用案例

<el-link type="primary" icon="el-icon-success">主要链接</el-link>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PrShtJX2-1607004687836)(Vue.assets/image-20201203133446839.png)]

5、Layout(栅格)布局组件的使用

通过基础的24分栏,迅速便捷地创建布局

在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)

5.1、使用Layout组件

<el-row>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
</el-row>

注意

  • 在一个布局组件中是由row和col组合而成
  • 在使用时要区分row属性和col属性

5.2、属性的使用

在这里插入图片描述

  • 行属性的使用

    <el-row gutter="20" tag="span">
      <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
      <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
    </el-row>
    

在这里插入图片描述

  • 列属性的使用

    layout组件中使用偏移

    注意:offset中的数字是24份所占的份数

    offset 会有浮动的现象当所在行数超过24的时候会吧下一列挤到下一行

    push 会入侵下一列

    <h1>layout组件中使用偏移</h1>
    <el-row>
      <el-col :span="6" :offset="3"><div style="border: 1px blue solid">layout组件中使用偏移</div></el-col>
    </el-row>
    

在这里插入图片描述

6、Container布局容器

快速的帮我们在页面上完成一个的布局,然后在对应布局的地方写上我们的组件

6.1、创建布局容器

<el-container>
    
</el-container>

6.2、创建布局容器

用于布局的容器组件,方便快速搭建页面的基本结构:

<el-container>:外层容器。当子元素中包含 <el-header><el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

<el-header>:顶栏容器。

<el-aside>:侧边栏容器。

<el-main>:主要区域容器。

<el-footer>:底栏容器。

以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>

6.3、容器的嵌套使用

<!--创建容器-->
<el-container>
  <!--header-->
  <el-header>
    <div><h1>我是标题</h1></div>
  </el-header>

  <!--这里使用了容器的嵌套,container默认为一行-->
  <el-container>
    <!--asider-->
    <el-aside>
      <div style="border: 1px plum solid"><h1>我是菜单</h1></div>
    </el-aside>
    <!--main-->
    <el-main>
      <div><h1>我是中心内容</h1></div>
    </el-main>
  </el-container>
  <!--footer-->
  <el-footer><div><h1>我是页脚</h1></div></el-footer>
</el-container>

6.4、容器组件的属性

在这里插入图片描述
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐