目錄

• 0 項目開源地址
• 1 效果圖
• 2 開發過程
• • 2.1 Element UI 安裝
  • 2.2 Element UI 官方示例
  • 2.3 解決側欄菜單沒對齊問題
  • 2.4 給側欄菜單添加路由功能
  • 2.5 側欄菜單折疊展開功能
• 3 基于Vue的博客項目復盤專欄

0 項目開源地址

👏 syzdev / vv-blog

1 效果圖

2 開發過程

2.1 Element UI 安裝

假設項目已經通過腳手架創建，名為admin：

進入admin目錄下，輸入命令vue add element

選擇引入方式，全局或按需都可以（第一次使用建議全局引入）

選擇簡體中文“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-menurouter...>

再在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的博客項目復盤專欄

專欄地址：基于Vue的博客項目復盤

00-基于Vue的博客項目展示

01-Vue博客后臺管理頁面框架搭建

總結

以上是生活随笔為你收集整理的01-Vue博客后台管理页面框架搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。