element-plus组件库快速上手教程

前言

一般我们开发单页面应用（关于单页面应用是什么在本专栏的另一篇文章中有介绍）时，特别是针对和我一样打算走后端开发的同学，对于前端只需要有了解的程度就行了，但是平常做项目练手时经常会要自己写前端的东西，所以本文的主旨就是让各位和我一样的后端开发的同学能快速使用element-ui提供的网页组件快速搭建自己需要的网页。

小tips

在Idea中安装一个叫“element”的插件，就可以在Idea中写element组件的关键词时快速生成基本代码，比如我现在想要生成一个el-button：

在安装了element这个插件在之后，我现在只要再敲一个Tab键即可代码自动补全并自带一些常用属性：

另外在vue-cli脚手架创建的vue项目中要使用elementplus的ui库得先在这里面安装，具体方式自己百度，或者参考我博客的其他文章，这里不再赘述…
算了我再写一遍叭（我就是这么善良），很简单就两步：
1、vue-cli中写如下安装命令

2、在main.js文件中引入elementplus组件

然后就引入完成啦！其实官网都有哈…可以自己去官网看看。

网页快速布局

打开element-plus的官网可以看到，在container布局容器这一栏中，有很多常见的网页格式，这里我们以下图的网页布局为例，示范如何快速搭建网页布局。

为了让网页的布局占满全屏，一般在开始布局之前，设定下全局样式，修改index.html，添加全局样式代码如下。

 <style>
      html,body,#app{
        height:100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
1
2
3
4
5
6
7

然后我们可以去elementplus的官网找到这一段布局的代码，粘贴过来，放在主页面容器中即可：

<el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
1
2
3
4
5
6
7
8
9
10

最后为了区分各个区域让我们看的更加清楚和明白网页的布局，可以在该页面的style标签下写上些样式来显示网页布局：

<style>
  .el-container {
    height: 100%;
  }

  .el-header,
  .el-footer
  {
    background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6; color: #333; text-align: center; line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3; color: #333; text-align: center; line-height: 160px;
  }

  .el-menu {
    background-color: #d3dce6;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

最后可以看到网页访问的结果：

然后就可以在各自的布局内部写代码啦！
使用elementplus进行快速网页布局的时候要注意，如果在一个里面写多个子容器，如下：

则默认这三个子容器在网页中是上下排列，如下：

而没有了Header，只剩了aside和main容器，它俩被包在一个container里面则应该就是左右排列，如下：


总结一下：
1、内有el-header或者el-footer子元素时，全部子元素呈垂直上下排列
2、需要水平左右排列时，需要再定义el-container包含水平左右排列的子元素
3、所有我们需要的组件，如表单、表格按钮等，凡是element官网提供的，我们都可以用上面的方法直接粘贴复制进我们的代码里直接拿来用即可。

router-view

一般利用vue-cli创建成的项目，项目中都会自动带一些Vue的初始界面和内容，我们可以全部删去，精简成如下：

而这个页面的templat中的div模块里我们一般都要放一个router-view，这个router-view就是我们整个项目的路由根据地，让这个App.vue成为我们路由渲染的根节点，每次新建的vue项目中的App.vue最好保持和上面一样的精简布局。

路由

那么我们的路由界面自然就是在router文件下的index.js内写了，如下：

然后我们可以很清楚看到，这个页面中的两个路由Home和about的引入方式还是不一样的。Home是通过直接import引入的Home组件，而About则是通过异步加载的方式（也称懒加载），我们输入了这个路由（/about）这个页面才会被加载，这可以加速我们整个项目的执行过程，这也是我们后期做优化的一个点。然后这个文件中的下面这一段：

这一段代码是我们项目去生成整个项目路由依赖的核心，这是对应的Vue3版本的新的路由实例的写法，这一段和Vue2是不一样的。但我们无需关心其到底是咋实现的，因为我们主要的代码是在上面那一段的路由里编写，这部分和我们项目中编写代码没有关系。
所以比如我们现在又在views文件夹下新建了一个页面文件叫List.vue，那么我们想让这个项目能够访问到该页面则只需在router文件下的index.js中照着前面的路由写一段与List.vue对应的代码即可：

同时List.vue也可以通过import引入的方式进行引入，一样可以加载并访问：

比如这里我们简单的写一个登录页面Login：
1、在views文件夹下写一个Login.vue

2、去elementplus官网找一个form表单的组件的源码粘贴复制进Login.vue中

（右上角红框点击可以看见源码）

3、将我们的Login.vue写进路由

4、访问页面

这样四步就完成啦，剩下的工作就是用自己那一丢丢简陋的HTML和CSS知识去对这个页面的内容代码进行改造，将它改造成我们喜欢的样子。

对vue组件的解释

在vue组件（即以.vue结尾的文件）中的源码中，一般都有如下三个结构：
template、style、script

<template>
  <!--用来写页面内容的地方-->
</template>

<style>
  <!--用来写页面样式的-->
</style>

<script>
  export default {
      data(){
        return  {
            //用来写这个页面所对应的数据
          }
      },
      created(){
        //作用是在页面一被渲染时，就会调用这个方法下面的所有内容
      },
      methods:{
        //用来写这个页面所对应的方法
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

element的layout布局

Layout布局，其实就是浏览器的整体页面被element从左到右划分为了24个列，在布局里面再放进一个容器用来装我们想展示的页面，如下图布局：

同时官网也提供了el-row用来表示行标签，el-col来表示列标签。

下面是官网的对这两个标签的一些属性解释：


中文解释下：
span：栅格占的列数
offect：从左往右的偏移列数
另外两个不咋用，我就不翻译了…
比如我们现在想写一个网页头部的内容，可以这样进行组合：

<template>
   <div>
       <el-row>
        <div style="background: #0d84ff;height: 80px;width: 100%;line-height: 80px">
            <el-col :span="18" :offset="3">
                <!--在这个栅格里面再开辟一个24列的el-row-->
                <el-row>
                    <!--logo区域-->
                 <el-col :span="6">
                     <span style="font-size: 30px;color: white;">Logo</span>
                 </el-col>

                    <!--导航栏-->
                    <el-col :span="18" style="color: white;">
                        <div style="width: 80px;text-align: center;display: inline-block">导航1</div>
                        <div style="width: 80px;text-align: center;display: inline-block">导航1</div>
                    </el-col>
                </el-row>
            </el-col>
        </div>
       </el-row>
   </div>

</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

然后效果图可以看到：

只要合理的通过24个栅格进行编排，然后做出自己想要的页面样式就可以了。

Table表格

继续浏览element的官网，我们翻到表格那一栏：

然后用老办法粘贴复制源码中template的那一部分进我们的代码中，将其用一个el-row和el-col包起来：

访问：

因为没有数据，稍显丑陋，不过没关系我们下面会加上的。
注意复制过来的源码中，我们可以看到下图中的红色圈圈起来的部分：

这一句的意思就是它必须要绑定vue里面的属性才能使用，这个data前面的冒号其实就是简写的v-bind。
明显的是我们需要绑定的就是一些数据，所以我们应该将tableData这个变量声明在vue中的data中，即组件页面中的script结构中：

<script>
    export default {
        //组件名
        name: "About",
        data() {
            return {
                tableData: [
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-02',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-04',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-01',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                ],
            }
        },
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

data()、return什么的都是固定结构，我们只看中间的tableData部分，可以看见tableData这个变量是个数组（JavaScript中数组定义用中括号[]）：

tableData:[]

然后这个数组中放置了三个对象（JavaScript中对象定义用大括号{}）：

tableData:[{数据对象1},{数据对象2},{数据对象3}]

通过这样的方式我们就可以将各个数据对象与我们的表格数据对应联系起来。
然后关于数据对象，举上面代码中的一个例子：

	{
         date: '2016-05-03',
         name: 'Tom',
         address: 'No. 189, Grove St, Los Angeles', 
      },
1
2
3
4
5

这里面的每个属性（如date、name等），都与上面的每个prop一一对应，只有这样属性才能对应的展示在表格中：

			<el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date"width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
1
2
3
4
5

后面的labei属性则是用来展示在表格中的文本信息：

但是这里展示的只是死数据，如果我们想从后端服务器中的数据库中调用数据来展示在这里的表格页面上怎么做呢？
springboot工程自己应该是可以写的叭？我就不具体写了，大概逻辑就是后台的controller层中写个接口如下，访问/user就会返回一个List集合，这个集合里面就装着我们查找的从数据库中取出来的数据，注意这个List集合返回给前端时是json格式的对象集，因为我们用了@RestController注解且springboot内部替我们集成了一个叫jackson的组件用来进行格式转换（它让我们返回的字东西全部转换为了json格式，字符串就转换为json字符串，对象就返回json对象）：

然后我们现在去访问后端接口：

可以看到已经返回到前端的json对象集。
然后现在想要进行前后端交互的话，要先在vue项目中引入axios组件，引入的办法自己百度，真的不难我懒得敲字了xdm。
安装完axios了之后，我们就在之前说到的script标签中的三个结构中去写对应的请求方法，因为是方法，所以我们自然写在methods里面：

<script>
    export default {
        //组件名
        name: "About",
        data() {
            return {
                tableData: [
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-02',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-04',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        date: '2016-05-01',
                        name: 'Tom',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                ],
            }
        },
        created() {
            //这是页面一被加载时，系统就会默认调用这里面的所有方法从上到下顺序执行
            //页面刷新时调用load方法
            this.load()
        },
        methods: {
            //方法都写在这里面
            //现在写的是我们的请求查询方法，比如叫load
            load(){
                //这个axios的方法里面写你的后端接口的路由
                //且除了get方法之外还有delete、put、post
                //分别对应了restful风格代码的编写，如get意思就是查询
                //axios通信后端一般都是下面的固定格式
                axios.get("http://localhost:8001/user").then(res => {
                    //控制台打印一下res对象信息
                    console.log(res)
                })
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

现在我们一进入这个页面就会调用create(){}中的this.load()方法，然后我们的load方法会发送一个ajax的get请求到后端去拿我们的数据。但因为我们的全段的端口和后端的端口不一致，会产生跨域问题：

在后台解决引入下面的代码解决跨域问题：

现在我们还需要一步就是将我们后端请求过来的数据赋值给我们的前端页面：

res是后端返回数据的对象，data是res对象中的数据，记住不要乱写嗷。
如果希望鼠标滑过表格中能产生斑马纹的效果，则在el-table中加个stripe属性就行。

轮播图（走马灯）

在element-plus中被改叫了走马灯，就是图片可以自动轮换或者手动轮换的样式：

也差不多其实用法，找到源码粘贴复制进我们的组件中：

然后可以看到（那是可以动的）：

解释一下上面的属性：

<el-carousel height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
                <!--v-for就是渲染一个数组，意思就是循环一个数组
                v-for="item in 4"的意思就是item这个变量的是为1到4作为一个数组循环播放
                如果放的是一个变量数组，则是循环这个数组里面的所有变量-->
                <!--:key就是每一项item值，这个不写也没事儿，不过一般会写-->
                <h3 class="small" style="text-align: center">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
1
2
3
4
5
6
7
8
9

下面我们试一下插入四个图片，让它们轮播起来。
首先是在data中定义一个imgList数组变量：

我们去网上找四个图片，将它们的链接作为字符串对象放进去：

然后去写我们的轮播图：

<div>
        <el-carousel trigger="click" height="760px">
            <el-carousel-item v-for="item in imgList" :key="item">
                <!--注意一定要加上v-bind属性-->
                <img :src="item" style="width: 100%">
            </el-carousel-item>
        </el-carousel>
    </div>
1
2
3
4
5
6
7
8

访问可以看到我们的轮播图起效果了：

然后轮播图就完成啦。

总结

我感觉有了这些东西应该差不多就可以自己去写页面了，这些部分作为基础然后去使用其他的element组件也是差不多的方法，遇到问题了多百度或者在csdn抑或是b站上找解决办法，自己多琢磨琢磨多用用，作为后端来说就差不多了。

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。