SpringBoot+Vue 博客系统（八）：前端项目引入Element-UI

Bertha 。 2023-10-11 23:13 45阅读 0赞

> 签名：但行好事，莫问前程。

#### 文章目录 ####

*  一、Element-UI 网址
 *  二、安装 Element-UI
 *   *  1、npm 安装
     *  2、CDN安装
 *  三、引入 Element-UI
 *   *  1、完整引入
 *  四、测试使用 Element-UI
 *   *  1、看一下按钮样式
 *  五、Container 布局容器
 *   *  1、Container布局容器地址
     *  2、容器的基本结构
     *  3、页面布局搭建
     *  4、页面布局拆分
     *  5、Header改造
 *  6、Aside改造
 *  总结

--------------------

## 一、Element-UI 网址 ##

[https://element.eleme.cn/][https_element.eleme.cn]

![在这里插入图片描述][69dbee5ed312472d8cd31dc96e89bcea.png]

## 二、安装 Element-UI ##

### 1、npm 安装 ###

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用

> npm 的方式全局安装

npm i element-ui -S

### 2、CDN安装 ###

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

## 三、引入 Element-UI ##

### 1、完整引入 ###

在 main.js 中写入以下内容：

import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);
    
    new Vue({
        
      el: '#app',
      render: h => h(App)
    });

我项目中采用的是完整引入

![在这里插入图片描述][1ae6a88603d94c4da04d607125ed9bc5.png]

## 四、测试使用 Element-UI ##

### 1、看一下按钮样式 ###

<el-button type="primary">按钮</el-button>

![在这里插入图片描述][b3073c75ced9468e906fe89e89b45f23.png]

![在这里插入图片描述][da1733a8e3974cec9e5bc017e52fbd5c.png]

引入Element-UI成功。

## 五、Container 布局容器 ##

### 1、Container布局容器地址 ###

[https://element.eleme.cn/\#/zh-CN/component/container][https_element.eleme.cn_zh-CN_component_container]

![在这里插入图片描述][5ef03fda972b4a14b20a8ebf9d69692a.png]

### 2、容器的基本结构 ###

![在这里插入图片描述][ba67fda5d8bc42aaadcf07dc29dfbf3a.png]

### 3、页面布局搭建 ###

![在这里插入图片描述][aee7746f304045e3bf5d01a273f3427b.png]

### 4、页面布局拆分 ###

<template>
    <el-container style="height: 100% ; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 100%">
        <Aside></Aside>
      </el-aside>
      <el-container style="height: 100%;">
        <el-header style="text-align: right; font-size: 12px; height: 100%">
          <Header></Header>
        </el-header>
    
        <el-main style="height: 100%;">
          <Main></Main>
        </el-main>
    
        <el-footer style="height: 100%;">
            <Fotter></Fotter>
      </el-footer>
      </el-container>
    </el-container>
    </template>
    
    <script>
    import Header from "./Header.vue";
    import Aside from "./Aside.vue";
    import Main from "./Main.vue";
    import Fotter from "./Fotter.vue";
    export default {
          
        name:"Index",
        components:{
          
            Aside,
            Header,
            Main,
            Fotter
        }
      };
    </script>

![在这里插入图片描述][82f059d55ac04e43bcbbb31970979033.png]

效果：

![在这里插入图片描述][4594f25b321647b08e89686b12830e4c.png]

### 5、Header改造 ###

<template>
    <div id="header">
    
      <div id="el-icon-s-fold">
        <i class="el-icon-s-fold"></i>
      </div>
    
      <div id="welcome">
        <span>欢迎来到 YangCunle`s Blog 博客管理系统</span>
      </div>
    
      <div id="dropdown">
        <span>杨存乐</span>
        <el-dropdown>
          <i class="el-icon-arrow-down"/>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    </template>
    
    <script>
    export default {
          
      name: 'Header',
      methods: {
          
        toUser(){
          
          console.log("个人中心")
        },
        loginOut(){
          
          console.log("退出")
        }
      }
    }
    </script>
    
    <style scoped>
    #header {
          
      display: flex;
      font-size: 15px
    }
    #el-icon-s-fold{
          
      margin-left: 5px;
      font-size: 20px
    }
    #welcome {
          
      flex: auto;
      margin-left: auto;
      text-align: center;
      font-size: 20px
    }
    #dropdown{
          
      margin-right: 15px ;
      margin-left: 5px
    }
    </style>

改造后的效果：  
![在这里插入图片描述][d4529a98bea744029b888c4ccd727aa5.png]

## 6、Aside改造 ##

<template>
      <el-menu
        default-active="/Home"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
    
        <el-menu-item index="/No" disabled="true" text-color="#fff" style="text-align: center ;font-size: 20px;">
          <span>YangCunle`s Blog</span>
        </el-menu-item>
    
        <el-menu-item index="/Home">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
    
        <el-menu-item index="/User">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </el-menu-item>
    
        <el-menu-item index="/Title">
          <i class="el-icon-position"></i>
          <span>博客标签</span>
        </el-menu-item>
    
        <el-menu-item index="/Blog">
          <i class="el-icon-document"></i>
          <span>博客管理</span>
        </el-menu-item>
    
        <el-menu-item index="/Leav">
          <i class="el-icon-s-comment"></i>
          <span>留言管理</span>
        </el-menu-item>
    
        <el-menu-item index="/Ziyuan">
          <i class="el-icon-s-cooperation"></i>
          <span>资源管理</span>
        </el-menu-item>
    
        <el-menu-item index="/Author">
          <i class="el-icon-s-custom"></i>
          <span>关于作者</span>
        </el-menu-item>
      </el-menu>
    </template>
    
    <script>
    export default {
          
      name: 'Aside'
    }
    </script>
    
    <style scoped>
    /*设置左侧边栏样式*/
    .el-menu {
          
      height: 100vh;
    }
    </style>

效果：  
![在这里插入图片描述][4ee21a72782b40718e4398f8b401dc29.png]

左侧边栏伸缩效果：  
![在这里插入图片描述][639c3e2c78ea45f2a1207937d44ec039.png]

--------------------

## 总结 ##

以上记录了引入Element-UI，以及使用Container 布局容器编写博客后台管理页面。如果对你有所帮助，请一键三连。

[https_element.eleme.cn]: https://element.eleme.cn/
[69dbee5ed312472d8cd31dc96e89bcea.png]: https://img-blog.csdnimg.cn/69dbee5ed312472d8cd31dc96e89bcea.png
[1ae6a88603d94c4da04d607125ed9bc5.png]: https://img-blog.csdnimg.cn/1ae6a88603d94c4da04d607125ed9bc5.png
[b3073c75ced9468e906fe89e89b45f23.png]: https://img-blog.csdnimg.cn/b3073c75ced9468e906fe89e89b45f23.png
[da1733a8e3974cec9e5bc017e52fbd5c.png]: https://img-blog.csdnimg.cn/da1733a8e3974cec9e5bc017e52fbd5c.png
[https_element.eleme.cn_zh-CN_component_container]: https://element.eleme.cn/#/zh-CN/component/container
[5ef03fda972b4a14b20a8ebf9d69692a.png]: https://img-blog.csdnimg.cn/5ef03fda972b4a14b20a8ebf9d69692a.png
[ba67fda5d8bc42aaadcf07dc29dfbf3a.png]: https://img-blog.csdnimg.cn/ba67fda5d8bc42aaadcf07dc29dfbf3a.png
[aee7746f304045e3bf5d01a273f3427b.png]: https://img-blog.csdnimg.cn/aee7746f304045e3bf5d01a273f3427b.png
[82f059d55ac04e43bcbbb31970979033.png]: https://img-blog.csdnimg.cn/82f059d55ac04e43bcbbb31970979033.png
[4594f25b321647b08e89686b12830e4c.png]: https://img-blog.csdnimg.cn/4594f25b321647b08e89686b12830e4c.png
[d4529a98bea744029b888c4ccd727aa5.png]: https://img-blog.csdnimg.cn/d4529a98bea744029b888c4ccd727aa5.png
[4ee21a72782b40718e4398f8b401dc29.png]: https://img-blog.csdnimg.cn/4ee21a72782b40718e4398f8b401dc29.png
[639c3e2c78ea45f2a1207937d44ec039.png]: https://img-blog.csdnimg.cn/639c3e2c78ea45f2a1207937d44ec039.png