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

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

SpringBoot+Vue 博客系统（连载系列）

---

YangCunle`s Blog 博客网址：http://www.yangcunle.com

---

SpringBoot+Vue 博客系统（一）：个人网站的由来

SpringBoot+Vue 博客系统（二）：个人博客的搭建

SpringBoot+Vue 博客系统（三）：个人博客的设计

SpringBoot+Vue 博客系统（四）：博客后端开发

SpringBoot+Vue 博客系统（五）：整合阿里云OSS

SpringBoot+Vue 博客系统（六）：整合Redis

SpringBoot+Vue 博客系统（七）：Blog前端Vue项目的搭建

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

SpringBoot+Vue 博客系统（九）：安装Axios处理跨域

SpringBoot+Vue 博客系统（十）：VUE路由 vue-route

SpringBoot+Vue 博客系统（十一）：博客后台管理

SpringBoot+Vue 博客系统（十二）：博客前台展示

SpringBoot+Vue 博客系统（十三）：项目打包部署到服务器

---

---

一、Element-UI 网址

https://element.eleme.cn/

二、安装 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)
});

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

四、测试使用 Element-UI

1、看一下按钮样式

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

引入Element-UI成功。

五、Container 布局容器

1、Container布局容器地址

https://element.eleme.cn/#/zh-CN/component/container

2、容器的基本结构

3、页面布局搭建

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>

效果：

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>

改造后的效果：

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>

效果：

左侧边栏伸缩效果：

---

总结

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