element-plus组件库快速上手教程_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里面则应该就是左右排列，如下：