Element UI框架学习篇(一)

1.准备工作

1.1 下载好ElementUI所需要的文件

ElementUI官网

1.2 插件的安装

1.2.1 更改标签的时实现自动修改

在这里插入图片描述

1.2.2 element UI提示插件

在这里插入图片描述

1.3 使用ElementUI需要引入的文件

<link rel="stylesheet" href="../elementUI/elementUI.min.css">
<!-- 先导vue.js再导入elementUI 因为elementUI是基于vue开发的页面美化插件-->
<script src="../js/vue.js"></script>
<script src="../elementUI/elementUI.min.js"></script>

2 栅格布局

2.1 一行一格

2.1.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../elementUI/elementUI.min.css">
    <!-- 先导vue.js再导入elementUI -->
    <script src="../js/vue.js"></script>
    <script src="../elementUI/elementUI.min.js"></script>
    <title>Document</title>
    <style>
        .a{
            background-color: red;
        }
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 一行一格 占据整行的  24就为占据整行-->
        <el-row>
            <el-col :span="24" class="a">
                <!-- <div class="a">第一行</div> -->
                第一行
            </el-col>
        </el-row>
    </div>
    <script>
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

2.1.2 运行截图

在这里插入图片描述

2.2 一行多格

2.2.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../elementUI/elementUI.min.css">
    <!-- 先导vue.js再导入elementUI -->
    <script src="../js/vue.js"></script>
    <script src="../elementUI/elementUI.min.js"></script>
    <title>Document</title>
    <style>
        .a{
            background-color: red;
        }
        .b{
            background-color: blue;
        }
        .c{
            background-color: green;
        }
        .d{
            background-color: skyblue;
        }
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="5" class="b">
                2-1
            </el-col>
            <el-col :span="14" class="d">
                2-2
            </el-col>
            <el-col :span="5" class="c">
                2-3
            </el-col>
        </el-row>
    </div>
    <script>
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

2.2.2 运行截图

在这里插入图片描述

2.3 水平居中

2.3.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../elementUI/elementUI.min.css">
    <!-- 先导vue.js再导入elementUI -->
    <script src="../js/vue.js"></script>
    <script src="../elementUI/elementUI.min.js"></script>
    <title>Document</title>
    <style>
        .a{
            background-color: red;
        }
        .b{
            background-color: blue;
        }
        .c{
            background-color: green;
        }
        .d{
            background-color: skyblue;
        }
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 水平居中 (总长度-占据长度)/2 -->
        <el-row>
            <el-col :span="4" class="a" :offset="10">
                3-1
            </el-col>
        </el-row>
    </div>
    <script>
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

2.3.2 运行截图

在这里插入图片描述

2.4 响应式布局

2.4.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../elementUI/elementUI.min.css">
    <!-- 先导vue.js再导入elementUI -->
    <script src="../js/vue.js"></script>
    <script src="../elementUI/elementUI.min.js"></script>
    <title>Document</title>
    <style>
        .a{
            background-color: red;
        }
        .b{
            background-color: blue;
        }
        .c{
            background-color: green;
        }
        .d{
            background-color: skyblue;
        }
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 响应式布局 sm和lg只有一个能有效-->
        <el-row>
            <el-col class="a" :sm="14" :lg="20">
                5-1
            </el-col>
            <el-col class="c" :sm="10" :lg="4">
                5-2
            </el-col>
        </el-row>
        <el-row>
            <el-col class="b" :sm="20" :lg="4">
                6-1
            </el-col>
            <!-- 可以sm=0操作一下 -->
            <el-col class="d" :sm="4" :lg="20">
                6-2
            </el-col>
        </el-row>
    </div>
    <script>
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>