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、容器组件的属性