VUE项目学习（七）：引用element-ui和进行简单页面布局

た入场券 2023-01-07 01:29 85阅读 0赞

## VUE项目学习（七）：引用element-ui和进行简单页面布局 ##

### 1、element-ui介绍 ###

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，目前广泛应用于vue应用之中 。

### 2、页面布局效果演示 ###

本文使用的vue项目的GItHub地址为：[https://github.com/CoderPlayer0/CsdnVue.git][https_github.com_CoderPlayer0_CsdnVue.git]  
![在这里插入图片描述][20210115114717567.gif]

### 3、引入element-ui ###

（1）在vue项目中安装element-ui，命令为：

npm i element-ui -S

安装完成之后为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]  
（2）在VUE项目中全局导入，在main.js中添加以下代码：

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css' //引入样式文件
    
    Vue.use(ElementUI)

### 4、在新页面中进行Container页面布局 ###

（1）这里使用Container 布局容器，设置页面的顶部栏、主要区域和脚部  
代码为：

<el-container>
          <el-header>Header</el-header>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>

element-ui默认样式为：

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

页面效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]  
（2）这里的页面并没有铺满整个屏幕，因此需要对样式进行调整，在对html、body、App和包裹的div添加一个高度设置，即可完成页面铺满屏幕，代码为：

html,body,#app,.demo,.el-container { 
      height: 100%;
    }

### 5 引用导航栏 ###

（1）在el-header中引入导航栏代码

<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">选项2</template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>

（2）在script中添加逻辑代码：

export default { 
        name: 'demo',
        data() { 
          return { 
            activeIndex: '1',
            activeIndex2: '1'
          }
        },
        methods: { 
          handleSelect(key, keyPath) { 
            console.log(key, keyPath)
          }
        }
      }

（3）导航栏效果为：  
![在这里插入图片描述][20210115113055777.gif]  
（4）但是这个导航栏两边还存在空隙，需要去除空隙  
主要原因是：el-header中存在默认样式：padding：0 20px;  
解决办法：在el-header样式代码中重新设置padding，更改后的样式代码为：

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

此时的的效果为：  
![在这里插入图片描述][20210115114130723.gif]

### 6当前页面vue代码： ###

<template>
      <div class="demo">
        <el-container>
          <el-header>
            <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
              <el-menu-item index="处理中心">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="我的工作台-选项1">选项1</el-menu-item>
                <el-submenu index="2-4">
                  <template slot="title">选项2</template>
                  <el-menu-item index="我的工作台-选项2-选项1">选项1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
            </el-menu>
          </el-header>
          <el-main>{
       {value}}</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </div>
    </template>
    
    <script> export default { name: 'demo', data() { return { activeIndex: '1', activeIndex2: '1', value: 'Main' } }, methods: { handleSelect(key, keyPath) { this.value = key } } } </script>
    
    <style> html, body, #app, .demo, .el-container { height: 100%; } .el-header, .el-footer { padding: 0; background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px; } </style>

[https_github.com_CoderPlayer0_CsdnVue.git]: https://github.com/CoderPlayer0/CsdnVue.git
[20210115114717567.gif]: /images/20221119/bc07a08805574944af2e009d9f99f91b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221119/c4b016e2ae8f485a94f38628f84ca601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210115105052787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3,size_16,color_FFFFFF,t_70
[20210115113055777.gif]: https://img-blog.csdnimg.cn/20210115113055777.gif
[20210115114130723.gif]: https://img-blog.csdnimg.cn/20210115114130723.gif