• Element

    Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

    Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~

    如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

    我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是：

    Elementicon-default.png?t=M666https://element.eleme.cn/#/zh-CN

    进入官网能看到如下页面，接下来直接点击 组件 ，页面如下

    一、快速入门

    1. 创建页面，并在页面引入Element 的css、js文件 和 Vue.js 

    1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    3. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    5. <script src="https://unpkg.com/element-ui/lib/index.js">script>

    2. 创建Vue核心对象

    Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象

    3. 官网复制Element组件代码

    在左菜单栏找到 Button 按钮 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。

    整体页面代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <el-row>
    10.         <el-button>默认按钮el-button>
    11.         <el-button type="primary">主要按钮el-button>
    12.         <el-button type="success">成功按钮el-button>
    13.         <el-button type="info">信息按钮el-button>
    14.         <el-button type="warning">警告按钮el-button>
    15.         <el-button type="danger">删除el-button>
    16.     el-row>
    17.     <el-row>
    18.         <el-button plain>朴素按钮el-button>
    19.         <el-button type="primary" plain>主要按钮el-button>
    20.         <el-button type="success" plain>成功按钮el-button>
    21.         <el-button type="info" plain>信息按钮el-button>
    22.         <el-button type="warning" plain>警告按钮el-button>
    23.         <el-button type="danger" plain>危险按钮el-button>
    24.     el-row>
    25.  
    26.     <el-row>
    27.         <el-button round>圆角按钮el-button>
    28.         <el-button type="primary" round>主要按钮el-button>
    29.         <el-button type="success" round>成功按钮el-button>
    30.         <el-button type="info" round>信息按钮el-button>
    31.         <el-button type="warning" round>警告按钮el-button>
    32.         <el-button type="danger" round>危险按钮el-button>
    33.     el-row>
    34.  
    35.     
    36. div>
    37.  
    38. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    40. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    42. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    43.  
    44. <script>
    45.     new Vue({
    46.         el: "#app"
    47.     })
    48.  
    49. script>
    50.  
    51. body>
    52. html>

    二、Element 布局

    Element 提供了两种布局方式，分别是：

    • Layout 布局

    • Container 布局容器

    1. Layout 局部

    通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

    在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到

    标签内。

    整体页面代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         .el-row {
    9.             margin-bottom: 20px;
    10.         }
    11.  
    12.         .el-col {
    13.             border-radius: 4px;
    14.         }
    15.  
    16.         .bg-purple-dark {
    17.             background: #99a9bf;
    18.         }
    19.  
    20.         .bg-purple {
    21.             background: #d3dce6;
    22.         }
    23.  
    24.         .bg-purple-light {
    25.             background: #e5e9f2;
    26.         }
    27.  
    28.         .grid-content {
    29.             border-radius: 4px;
    30.             min-height: 36px;
    31.         }
    32.  
    33.         .row-bg {
    34.             padding: 10px 0;
    35.             background-color: #f9fafc;
    36.         }
    37.     style>
    38.  
    39. head>
    40. <body>
    41. <div id="app">
    42.     <el-row>
    43.         <el-col :span="24">
    44.             <div class="grid-content bg-purple-dark">div>
    45.         el-col>
    46.     el-row>
    47.     <el-row>
    48.         <el-col :span="12">
    49.             <div class="grid-content bg-purple">div>
    50.         el-col>
    51.         <el-col :span="12">
    52.             <div class="grid-content bg-purple-light">div>
    53.         el-col>
    54.     el-row>
    55.     <el-row>
    56.         <el-col :span="8">
    57.             <div class="grid-content bg-purple">div>
    58.         el-col>
    59.         <el-col :span="8">
    60.             <div class="grid-content bg-purple-light">div>
    61.         el-col>
    62.         <el-col :span="8">
    63.             <div class="grid-content bg-purple">div>
    64.         el-col>
    65.     el-row>
    66.     <el-row>
    67.         <el-col :span="6">
    68.             <div class="grid-content bg-purple">div>
    69.         el-col>
    70.         <el-col :span="6">
    71.             <div class="grid-content bg-purple-light">div>
    72.         el-col>
    73.         <el-col :span="6">
    74.             <div class="grid-content bg-purple">div>
    75.         el-col>
    76.         <el-col :span="6">
    77.             <div class="grid-content bg-purple-light">div>
    78.         el-col>
    79.     el-row>
    80.     <el-row>
    81.         <el-col :span="4">
    82.             <div class="grid-content bg-purple">div>
    83.         el-col>
    84.         <el-col :span="4">
    85.             <div class="grid-content bg-purple-light">div>
    86.         el-col>
    87.         <el-col :span="4">
    88.             <div class="grid-content bg-purple">div>
    89.         el-col>
    90.         <el-col :span="4">
    91.             <div class="grid-content bg-purple-light">div>
    92.         el-col>
    93.         <el-col :span="4">
    94.             <div class="grid-content bg-purple">div>
    95.         el-col>
    96.         <el-col :span="4">
    97.             <div class="grid-content bg-purple-light">div>
    98.         el-col>
    99.     el-row>
    100.  
    101.     
    102.  
    103.     <el-row>
    104.         <el-col :span="3">
    105.             <div class="grid-content bg-purple">div>
    106.         el-col>
    107.         <el-col :span="3">
    108.             <div class="grid-content bg-purple-light">div>
    109.         el-col>
    110.         <el-col :span="3">
    111.             <div class="grid-content bg-purple">div>
    112.         el-col>
    113.         <el-col :span="3">
    114.             <div class="grid-content bg-purple-light">div>
    115.         el-col>
    116.         <el-col :span="3">
    117.             <div class="grid-content bg-purple">div>
    118.         el-col>
    119.         <el-col :span="3">
    120.             <div class="grid-content bg-purple-light">div>
    121.         el-col>
    122.         <el-col :span="3">
    123.             <div class="grid-content bg-purple">div>
    124.         el-col>
    125.         <el-col :span="3">
    126.             <div class="grid-content bg-purple-light">div>
    127.         el-col>
    128.     el-row>
    129.  
    130. div>
    131.  
    132. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    134. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    136. <script src="https://unpkg.com/element-ui/lib/index.js">script>
    137.  
    138. <script>
    139.     new Vue({
    140.         el: "#app"
    141.     })
    142.  
    143. script>
    144.  
    145. body>
    146. html>

    2. Container 布局容器

    用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

    如下图是官网提供的 Container 布局容器实例：

    该效果代码中包含了样式、页面标签、模型数据。将里面的样式