01-Vue博客后台管理页面框架搭建

0 项目开源地址

👏 syzdev / vv-blog

1 效果图

2 开发过程

2.1 Element UI 安装

假设项目已经通过脚手架创建，名为admin：

1. 进入admin目录下，输入命令vue add element
2. 选择引入方式，全局或按需都可以（第一次使用建议全局引入）
3. 选择简体中文“zh-CN”

注意：若是按需引用，需要在plugins/element.js文件中先import所需组件，再Vue.use()所需组件（几个Notice类组件除外）。

2.2 Element UI 官方示例

进入Element UI官方文档，在“Container 布局容器”下找到示例：

点击显示代码，在编辑器中新建view/Main.vue，将代码复制到对应位置，并做适当的精简，如下：

<template>
  <el-container style="height: 100vh">
    <!-- 左侧菜单部分 -->
    <el-aside width="200px">
      <el-menu
        :default-openeds="['1']"
        background-color="#304156"
        text-color="#ddd"
      >
        <!-- 左侧子菜单 -->
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>导航一</template
          >
          <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 右侧内容区域 -->
    <el-container>
      <!-- 顶部内容区域 -->
      <el-header style="text-align: right; font-size: 12px">
        <span>Admin</span>
      </el-header>
      <!-- 中间主要内容区域 -->
      <el-main> 内容区域 </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
  background-color: #304156;
}
</style>

效果图如下：

2.3 解决侧栏菜单没对齐问题

如图，仔细观察侧栏菜单，会发现每次展开和折叠都有一部分没有对齐，很影响美观：

打开Chrome调试工具，选中侧栏菜单，再选中ul标签，发现有一个border-right样式，去掉该样式后显示正常：

在style中添加样式就可以解决该问题：

  .el-menu {
    border-right: none;
  }

2.4 给侧栏菜单添加路由功能

官方文档：

在el-menu上添加router属性：

 <el-menu
   router
   ...
 >

再在el-menu-item上添加index属性：

 <el-menu-item index="/category/create">新建分类</el-menu-item>
 <el-menu-item index="/category/list">分类列表</el-menu-item>

其他事项：还可以在el-menu上添加属性unique-opened限制每次只能打开一个el-menu-item-group 。当打开一个子菜单页面后，再刷新页面可以发现侧栏菜单栏会失去高亮，所以要在el-menu上添加属性：default-active="$route.path" 这样就将默认激活项与路由绑定了。

2.5 侧栏菜单折叠展开功能

需要添加一个变量来表示当前侧栏菜单是折叠还是展开状态：

  data() {
    return {
      isCollapse: false, // 表示折叠还是展开
    }
  },

将该变量绑定在el-menu上：

 <el-menu
   :collapse="isCollapse"
   ...
 >

需要一个方法来切换折叠与展开的状态：

 collapseMenu() {
   this.isCollapse = !this.isCollapse // 布尔值取反
 },

在header区域添加一个按钮用来控制折叠与展开：

<el-header style="text-align: right">
  <!-- 用于控制折叠和展开的按钮 -->
  <div @click="collapseMenu">
    <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
  </div>
  <span>Admin</span>
</el-header>

注意：<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i> 通过当前折叠与展开的状态来显示不同的按钮icon。

修改按钮位置及样式：

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}

效果图：

这里有个小问题，就是折叠后菜单的文字依然显示，解决的方法就是将一级菜单的文本包裹在span标签中，将：

<template slot="title"><i class="el-icon-message"></i>导航一</template>

修改为：

<template slot="title"><i class="el-icon-message"></i><span>导航一</span></template>

最后的效果图：

3 基于Vue的博客项目复盘专栏

0. 专栏地址：基于Vue的博客项目复盘
1. 00-基于Vue的博客项目展示
2. 01-Vue博客后台管理页面框架搭建