目录

一. 认识ElementUI

1. 认识ElementUI

2. ElementUI与Vue

3. 使用npm来创建Vue项目

4. 添加ElementUI配置

4.1 使用npm安装

5. 使用CDN的方式创建页面

二. Layout布局和Container布局容器

1. Container布局容器

2. 常见的布局方式

2.1 上下布局

2.2 上中下布局

2.3 左右布局

2.4 上-下（左右）布局

2.5 上-下（左右（上下））布局

2.6 左右（上下）布局

2.7 左-右（上中下）布局

3. Layout布局

3.1 基础布局

3.2 分栏间隔

3.3 分栏偏移

3.4 对齐方式

3.5 响应式布局

三. 基础组件

1. Icon图标

2. Button按钮

3. Link文字链接

一. 认识ElementUI

1. 认识ElementUI

Element UI 目前提供了 56 个组件，分成了 6 大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其他类型组件。作为一个 UI 组件库，提供这些丰富的组件能很好地满足大部分 PC 端业务开发需求。同时，若提供的组件无法满足需求，还能对它进行二次开发，节省了开发者的时间。

首先，我们访问一下 Element UI 的官网，逛一逛这个站点。

引入眼帘的是官网首页，如下图所示：

从网站上的导航栏可以看出，官网分为四个部分：指南、组件、主题和资源。

然后，我们点击 “指南”，可以发现这部分的内容分为 2 块：设计原则和导航。其中，包含四个设计原则（一致、反馈、效率、可控），而导航这部分的内容主要讲解是 Element UI 提供的导航功能。它将导航功能分为 “侧栏导航” 和 “顶部导航”，在项目设计工程中选择合适的导航类型能帮助用户降低产品的学习门槛。官方就提到了这两类导航之间的区别：

1. 侧栏导航：提高导航可见性，方便页面之间切换。
2. 顶部导航：顺应了从上至下的正常浏览顺序，方便浏览信息，但也限制了导航的数量和文本长度。

接着，我们在官网的顶部导航中点击 “组件”，这部分的内容就是我们平时开发过程中常用到的部分了。显而易见，”组件“ 板块提供了 6 大类型的组件，每个组件的下方还附有源码示例，也可以在 CodePen 中运行源码，如下图所示。

同时，在该板块还提供了使用指南等内容，方便开发者查阅。

接下来这个板块是 “主题” 。Element UI 的一大特色就是支持开发者自定义主题，你可以使用在线主题编辑器，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉效果。

最后一部分是 ”资源“，主要提供给设计师使用。Element UI 目前为 Axure 和 Sketch 两种设计工具提供了插件，方便设计师在这些软件中进行设计时调用 Element UI 的组件，从而保证视觉风格的统一。

2. ElementUI与Vue

Element UI 是 UI 框架，而 Vue 是前端框架，UI 框架一般是伴随着前端框架产生的。虽然目前 Element UI 为 Angular 和 React 也提供了组件库，但国内大多数开发者还是用它与 Vue 配合使用进行开发。

通常情况下，我们可以利用 Vue CLI 创建一个前端项目，然后引入和配置 Element UI。例如，当你使用 Vue CLI 生成了一个初始化 Vue 项目，你可以通过下面命令安装 Element UI：

npm install element-ui -S

接着在 package.json 文件中就会插入一条记录：

"dependencies": {"element-ui": "^2.15.1"
 }

这就表明 Element UI 已成功安装到你的 Vue 项目中了。通过 import 语法就可以在项目中引入 Element UI 进行使用。

看到上面的 npm 安装步骤，想必大家都已经跃跃欲试了，同学们不要着急，这里仅是让大家对于 Element UI 与 Vue 有一个初步的理解，接下来我带大家手把手搭建开发环境。😉

本课程是基于 Vue 来学习 Element UI，如果同学们对 Element React 和 Element Angular 感兴趣，可以自行查看官方文档。

3. 使用npm来创建Vue项目

也可以基于命令行工具 Vue CLI 的方式去搭建 Vue 环境，本课程我们基于这个工具去搭建环境。那我们开始吧！

首先，打开你们右侧的环境，环境已经为大家安装了 Vue，所以我们直接在命令行输入以下命令来创建一个名为 vue-elementui 的项目。

为了保证后面代码正常运行和配置一致，所以先安装下指定版本的 Vue CLI。

npm install -g @vue/cli@4.5.13

vue create vue-elementui

创建项目的过程中会让你选择预设的版本以及安装依赖时使用的包管理器。这里我们分别选择使用 Default ([Vue 2] babel, eslint) 和 NPM 作为预设以及包管理器。如下图所示。

选择之后，就进入安装进程中，安装成功后，我们可以看到创建的 Vue 项目文件，如下图所示：

然后，我们使用以下命令来初始化并启动项目。

cd vue-elementui
 npm run serve

此时，我们点击右侧的 WEB 服务按钮，发现显示如下：

这是为什么呢？🤔

这是由于我们的线上环境只开放了 8080 端口，但是需要通过网站域名访问，而刚才打开的这个 devServer 服务器并没有与网站域名关联。

为了解决这个问题，我们需要在 vue-elementui 目录下创建一个 vue.config.js 文件，通过以下配置将该服务器映射到网站域名上：

const HOST = process.env.HOST;
 module.exports = {publicPath: "./",productionSourceMap: false,devServer: {host: HOST || "0.0.0.0",open: true,disableHostCheck: true,},
 };

添加完上述配置文件后，需要在终端中使用 ctrl+c 关闭 Vue 项目启动的服务器，然后使用以下命令重新启动。

npm run serve

此时浏览器中显示的就是我们的初始化应用了，如下图所示：

4. 添加ElementUI配置

前面我们只是利用 Vue CLI 初始化了基于 Vue 的项目，现在我们还需要添加 Element UI 配置。

在讲配置之前，我们先说一说 Element UI 的安装。

4.1 使用npm安装

我们在 vue-elementui 目录下命令执行以下命令：

npm i element-ui -S

照步骤操作的同学，上一步配置好域名映射后并没有关闭 devServer 服务，我们可以另开一个终端来执行 npm 安装，也可以用 ctrl+c 关闭服务后再安装。

安装成功后，我们打开 vue-elementuisrcmain.js 文件，引入 Element UI。

Element UI 的引入有两种方式：完整引入和按需引入。

完整引入是把所有 Element UI 的组件都引入其中，在 main.js 中添加如下代码即可：

// main.jsimport Vue from "vue";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css"; // 样式文件需要单独引入
 import App from "./App.vue";// Vue.config.productionTip = false;
 Vue.use(ElementUI);new Vue({render: (h) => h(App),
 }).$mount("#app");

需要注意：

按需引入是只引入需要的组件。

我们需要 babel-plugin-component 的帮助才能实现按需引入。

首先，使用以下命令来安装 babel-plugin-component。

npm install babel-plugin-component -D

然后，将 .babelrc 修改为以下内容。

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
 }

完成上述配置后，我们就可以按需引入了。比如我们引入 Button 和 Select，那我们需要在 main.js 中添加以下内容。

import Vue from "vue";
 import { Button, Select } from "element-ui";
 import App from "./App.vue";Vue.component(Button.name, Button);
 Vue.component(Select.name, Select);
 /* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: "#app",render: (h) => h(App),
 });

思考一下：按需引入和完整引入有什么区别呢？🤔

完整引入，即便你的代码没有使用所有组件，但所有的组件还是会被整体打包，这会造成模块资源占用的空间较大，而按需引入只会打包你用到的组件，使得项目的体积减小了。

ok！以上便完成了 Element UI 的引入，一个基于 Vue 和 Element UI 的开发环境已经搭建完毕，现在我们可以编写代码了。

5. 使用CDN的方式创建页面

搭建一个 Vue 的环境有多种方式，除了上面使用 npm 来创建 Vue 项目，你也可以在 html 文件中通过

在 html 文件中，同样使用 CDN 的方式引入 ElementUI：

下面，我们创建一个 index.html 文件，写入以下代码来试一试

 
我是个按钮
 

效果如下所示：

二. Layout布局和Container布局容器

1. Container布局容器

当我们在写一个前端项目时，首先应该考虑页面的布局，设计好页面的布局后，才会用 CSS 样式去填充。比如，我们来看看 Element UI 官网组件页面的布局。

从上图可以看出，官网的布局可以分成四个容器，顶部容器、主要内容区域容器、侧边容器、底栏容器。在 Element UI 的组件库里为我们提供了对应的布局容器组件，方便我们实现页面的基本布局。

除了上述的四个容器组件外，我们还有个外层容器 ，当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

需要注意的是：el-container 的子元素只能是 el-header、el-main、el-aside、el-footer，而这四个容器的父元素也只能是 el-container。

2. 常见的布局方式

常见的布局方式有七种，我们通过代码例子带大家过一遍这七种布局方式。

2.1 上下布局

上下布局就是头部容器+主要区域容器的布局方式，其结构如下所示：

在 Container.vue 文件中的写入以下代码。

使用 npm run serve 运行后，打开 Web 服务可以看到如下效果。

2.2 上中下布局

上中下布局就是头部容器+主要区域容器+底部容器的布局方式，其结构如下所示：

我们对 Container.vue 的代码做如下修改

我们可以看到如下效果：

2.3 左右布局

左右布局就是侧边容器+主要区域容器的布局方式，其结构如下所示：

我们对 Container.vue 文件做如下修改：

显示效果如下所示：

细心的同学可能发现了，上面代码中，我在 标签上写了 width 属性来设置该容器的宽度，为什么不直接写在选择器里呢？🤔

尝试把宽度放到选择器中的同学们可能发现了，侧边区域框会有一个宽度，但是这个宽度并非我们设置的值，如果你把 width 属性删除，会发现也有一个相同的宽度，这是为什么呢？

这与 组件的源码有关，在源码中给 el-aside 组件设置了默认宽度为 300px，若没有设置宽度或者优先级低于默认值的优先级时，都会是使用 width 属性的默认值。

所以，同学们请记住，想要改变 el-aside 容器的宽度一定要使用行内样式。

2.4 上-下（左右）布局

上-下（左右）布局，就是顶栏容器为上部分，侧边栏容器和主要区域容器为下部分，其结构如下所示：

我们对 Container.vue 文件做如下修改：

显示效果如下所示：

2.5 上-下（左右（上下））布局

上-下（左右（上下）布局，语言不好描述，我们直接看图吧！

我们对 Container.vue 文件做如下修改：

显示效果如下所示：

2.6 左右（上下）布局

左右（上下）布局的结构如下图所示：

我们对 Container.vue 文件做如下修改：

显示效果如下所示：

2.7 左-右（上中下）布局

左-右（上中下）布局结构如下图所示：

我们对 Container.vue 文件做如下修改：

显示效果如下所示：

ok，以上就是我们 Container 容器的全部内容，接下来我们学习 Layout 布局。

3. Layout布局

当我们拿到一个 PC 端页面的设计稿时，往往会发现页面的布局有一定的规律：行与行之间会以某种方式对齐。比如，Element UI 官网的 Header 部分，其内部又可划分为如下图所示的几个模块。

对于这样的设计，我们可以使用 Element UI 提供的栅格布局来实现。

学过 Bootstrap 的同学，对栅格布局应该不会陌生，整个布局包括行和列，Bootstrap 会把屏幕分成 12 列，我们通过 CSS 样式可以设置每一列的占比。

而在 Element UI 中也提供了类似 Bootstrap 的栅格布局，那它是如何实现的呢？快点击下一步 👇，揭晓答案吧！

3.1 基础布局

首先，新建 elementui-container/src/views/Layout.vue 文件，该文件用来写我们的 Layout 布局代码。

然后，我们对 App.vue 文件做如下修改：

准备工作做好了，那我们正式进入 Layout 的学习吧！

Layout 布局把屏幕分成 24 列，也就是说每一行可以分成 24 等份。在 Element UI 中，用 组件代表行，用 组件代表列，如下图所示。

如果想要设置 的占比，使用它的 :span 属性来制定所占份数就好了，这样我们就可以自由地组合布局了。

话不多说，我们直接看例子吧！

在 Layout.vue 文件中添加以下内容。

显示效果如下所示：

代码说明如下：

接下来，我们看一看分栏间隔的用法～

3.2 分栏间隔

对于栅格布局来说，我们可能会有这样一个需要，就是列与列之间有一定的间隔间隙，故在 组件里提供了 gutter 属性来指定每一列之间的间隔。

与需要设置间隔的列是父子关系。

gutter 属性的使用格式如下所示：

 ... 

我们来举个例子，修改 Layout.vue 文件中的代码：

显示效果如下所示：

在上面代码中，使用 设置列与列之间的间隔为 10 个像素点。

3.3 分栏偏移

分栏偏移就是我们可以指定某列的偏移，由于作用域是列，所以 Element UI 给 el-col 组件提供了 offset 属性来设置列的偏移栏数。

offset 属性的使用格式如下所示：

我们来举个例子，修改 Layout.vue 文件中的代码：

显示效果如下所示：

代码说明如下：

3.4 对齐方式

当一行分栏的总占比没有达到 24 份的时候，我们可以通过使用 flex 布局让分栏灵活对齐。

对于不同的对齐方式，flex 布局提供了 justify 属性来指定 start、center、end、space-between、space-around 其中的属性值来设置元素的排版方式，具体如下表所示：

由于对齐方式的作用域是行，所以我们给 组件添加 type 和 justify 属性，其使用格式如下所示：

 ... 

我们来举个例子，修改 Layout.vue 文件中的代码：

显示效果如下所示：

3.5 响应式布局

Element UI 参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：

这五个响应尺寸的默认值为 24，也就是说，任何一个尺寸属性不设置，则该尺寸下的响应式宽度为 24。

响应尺寸属性的使用格式如下所示：

我们来举个例子，修改 Layout.vue 文件中的代码：

显示效果如下所示：

在上面代码中，我们可以看出四列里，每一个相应尺寸属性总占比都为 24。

三. 基础组件

1. Icon图标

我们在平时的开发中，通常会用到一些小图标，Element UI 为我们提供了一系列 UI 层面设计常用的 Icon 图标集合，如下图所示：

从上图可以看到大部分都是我们日常会用到的图标，基本上可以满足我们的开发需求。

那么我们怎么使用这些图标呢？🤔

很简单，直接通过设置类名为 el-icon-iconName 来使用即可，例如我们设置一个删除图标，通过 标签的 class 属性引入对应图标的类名就可以了。