目錄

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

0 項目開源地址

👏 syzdev / vv-blog

1 效果圖

2 開發(fā)過程

2.1 Element UI 安裝

假設(shè)項目已經(jīng)通過腳手架創(chuàng)建，名為admin：

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

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

選擇簡體中文“zh-CN”

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

2.2 Element UI 官方示例

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

點擊顯示代碼，在編輯器中新建view/Main.vue，將代碼復(fù)制到對應(yīng)位置，并做適當(dāng)?shù)木?#xff0c;如下：

<template><el-container style="height: 100vh"><!-- 左側(cè)菜單部分 --><el-aside width="200px"><el-menu:default-openeds="['1']"background-color="#304156"text-color="#ddd"><!-- 左側(cè)子菜單 --><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>導(dǎo)航一</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><!-- 右側(cè)內(nèi)容區(qū)域 --><el-container><!-- 頂部內(nèi)容區(qū)域 --><el-header style="text-align: right; font-size: 12px"><span>Admin</span></el-header><!-- 中間主要內(nèi)容區(qū)域 --><el-main> 內(nèi)容區(qū)域 </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 解決側(cè)欄菜單沒對齊問題

如圖，仔細(xì)觀察側(cè)欄菜單，會發(fā)現(xiàn)每次展開和折疊都有一部分沒有對齊，很影響美觀：

打開Chrome調(diào)試工具，選中側(cè)欄菜單，再選中ul標(biāo)簽，發(fā)現(xiàn)有一個border-right樣式，去掉該樣式后顯示正常：

在style中添加樣式就可以解決該問題：

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

2.4 給側(cè)欄菜單添加路由功能

官方文檔：

在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 。當(dāng)打開一個子菜單頁面后，再刷新頁面可以發(fā)現(xiàn)側(cè)欄菜單欄會失去高亮，所以要在el-menu上添加屬性：default-active="$route.path" 這樣就將默認(rèn)激活項與路由綁定了。

2.5 側(cè)欄菜單折疊展開功能

需要添加一個變量來表示當(dāng)前側(cè)欄菜單是折疊還是展開狀態(tài)：

data() {return {isCollapse: false, // 表示折疊還是展開}},

將該變量綁定在el-menu上：

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

需要一個方法來切換折疊與展開的狀態(tài)：

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

在header區(qū)域添加一個按鈕用來控制折疊與展開：

<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> 通過當(dāng)前折疊與展開的狀態(tài)來顯示不同的按鈕icon。

修改按鈕位置及樣式：

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

效果圖：

這里有個小問題，就是折疊后菜單的文字依然顯示，解決的方法就是將一級菜單的文本包裹在span標(biāo)簽中，將：

<template slot="title"><i class="el-icon-message"></i>導(dǎo)航一</template>

修改為：

<template slot="title"><i class="el-icon-message"></i><span>導(dǎo)航一</span></template>

最后的效果圖：

3 基于Vue的博客項目復(fù)盤專欄

專欄地址：基于Vue的博客項目復(fù)盤

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。