Element

前面介绍了三剑客(HTML,CSS,JavaScript)，Axios和Vue，本篇将带你快速了解并使用Element组件库以及了解Nginx项目打包部署流程。

一、Element

1、概述

Element是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
Element官方网站：https://element.eleme.cn/#/zh-CN

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。

2、快速入门

1）安装ElementUI组件库
在当前工程的目录下，右键打开终端

在终端下输入如下命令进行安装

1	npm install element-ui@2.15.3

2）引入ElementUI组件库
将下述代码加入main.js文件中。

1
2
3

import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在 views目录下新建一个element目录，并在该目录下新建一个 ElementView.vue文件，用于编写本次快速入门的代码

3）访问官网，复制组件代码，并调整
这里我们选择一组按钮，复制其代码。当然，还有很多其他组件，可查看官方文档自行替换。

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

黏贴到ElementView.vue文件的<div>标签中，并调整一下格式

注：选中多行，按 tab，多行会同时缩进，提高调整效率。

这时候运行还没有效果，因为还要在App.vue根组件中引用ElementView.vue中的内容。如下

点击NPM脚本中的三角形小按钮运行项目，浏览器中访问得到的地址 http://localhost:7000/ ，成功显示如下。

3、常用组件

常用组件的学习比较简单，因为官方文档中提供了各种组件的代码，只需根据需要复制修改即可。

官方文档：https://element.eleme.cn/#/zh-CN/component/installation

3.1 Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

以带边框表格为例。
1）在官方文档中找到组件 ->Table表格 ->带边框的表格，复制代码到我们的ElementView.vue文件中，按 ctrl+alt+l 格式化一下，这样看起来更加规整。
2）再回去复制表格对应的data数据。

3）查看运行效果

注：如果有某些参数不懂的，可以查看官方文档里面的参数说明，非常全面和详细，部分如下。

当数据量过多时，使用分页分解数据。

以带有背景色的分页为例。
1）在官方文档中找到组件 ->Pagination分页 ->带有背景色的分页，复制代码到我们的ElementView.vue文件中，按 ctrl+alt+l 格式化一下，这样看起来更加规整。

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

2）浏览器查看效果

注：如果有某些参数不懂的，可以查看官方文档里面的参数说明，非常全面和详细，部分如下。

可以参考官方文档的参数说明，自行设置展示的效果，比如，设置原来代码中的 layout如下

1
2
3

<!-- Pagination分页 -->
<el-pagination background layout="sizes, prev, pager, next, jumper, total" :total="1000">
</el-pagination>

则浏览器查看效果为

3）其他
可根据需要自行查看或设置其他附加功能，照猫画虎，这里不再赘述。

设置Events事件触发

3.3 Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

以自定义内容为例。

Dialog 组件的内容可以是任意的，甚至可以是表格或表单

1）在官方文档中找到组件 ->Dialog对话框 ->自定义内容，复制代码到我们的ElementView.vue文件中，按 ctrl+alt+l 格式化一下，这样看起来更加规整。

<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="date" label="日期" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="address" label="地址" width="200"></el-table-column>
  </el-table>
</el-dialog>

易知需要 dialogTableVisible和 gridData两个数据模型。再将含有这两个的代码复制过来，如下

gridData: [{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,