前言

大家都知道，后臺管理界面不需要很酷炫的動畫效果，也不需要花里胡哨的界面布局，只需要簡潔易用、清爽明了的界面以便于管理數據。而現在普遍的后臺管理系統的界面布局都差不多，上中下結構，然后左邊是導航欄。隨便貼兩個Bootstrap的主題模板就是這樣的：

image

這其中難的不是布局，而是如何點擊左側導航欄來渲染中央顯示界面(路由)。在這里我會用Vue.js和ElementUI來快速搭建起這樣的后臺管理界面布局！

準備

本文搭建項目時的工具以及版本號如下：

node.js -- v12.16.1

npm -- 6.13.4

@vue/cli -- 4.2.2

版本有差異也沒有事情，變化不會太大。

首先，通過Vue-cli工具來快速搭建起一個Vue的項目(這里就不講解怎么用Vue-cli搭建項目了，文末有項目的github演示地址，下載下來即可運行)

項目搭建好后呢，接下來要導入我們要用的組件，我在這里會用到ElementUI和font-awesome圖標(當然也可以直接使用ElementUI中的圖標)。

使用npm來安裝兩個工具：

npm install element-ui

npm install font-awesome

安裝完畢后，在main.js里導入兩個工具，這樣才能在項目中使用：

import Vue from 'vue'

import App from './App.vue'

import router from './router'

// 導入ElementUI

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

// 導入font-awesome(導入就可以直接用了)

import 'font-awesome/scss/font-awesome.scss'

// 使用ElementUI

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({

router,

render: h => h(App)

}).$mount('#app')

配置路由

所有都準備好了后，我們來修改App.vue文件，這個是整個項目的界面入口，所以我們在這里定義好最基本的視圖：

// 整體布局樣式，讓整個視圖都鋪滿

html, body, #app {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

視圖配置好后，接下來要配置路由設置，我們先新建四個頁面組件：Main.vue，Index.Vue，Setting.vue，404.vue。這個等下都要用的，其中Index.Vue和Setting.vue都是Main.vue的嵌套路由，這里為了做演示，Index.vue和Setting.vue里面就只寫一個簡單的一級標題。此時我們的項目結構如下：

image

然后我們在router的js文件里開始配置路由，注意看注釋：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

{

// 重定向，用來指向一打開網頁就跳轉到哪個路由

path: '/',

redirect: '/main'

},

{

// 首頁

path: '/main',

name: 'Main',

component: () => import('../views/Main.vue'),

children:[// 開始嵌套路由，這下面的所有路由都是Main路由的子路由

{

path:'/', // 嵌套路由里默認是哪個網頁

redirect: '/index'

},

{

path:'/index', // 首頁的路由

name:'Index',

component:() => import('../views/Index.vue')

},

{

path:'/setting', // 設置頁面的路由

name:'Setting',

component:() => import('../views/Setting.vue')

}

]

},

{

path:'/*', // 注意，這里不是嵌套路由了，這是為了設置404頁面，一定要放在最后面，這樣當服務器找不到頁面的時候就會全部跳轉到404

name:'404',

component: () => import('../views/404.vue')

}

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

export default router

路由是配置好了，接下來就是最重要的Main.vue里的布局

布局

我們先在Main.vue里布置最基本的結構，即上中下，中間又分左右：

這樣最基本的布局就好了，我們接下來只需要在對應的區域渲染好內容就行，這里最主要的就是使用ElementUI其中的路由功能。

我們將Main.vue里的內容完整給寫好，注意看注釋：

:class="collpaseIcon">

default-active="0"

class="el-menu-vertical-demo"

:collapse="isCollapse"

:router="true"

>

首頁

系統管理

網站設置

角色管理

店鋪模板

會員管理

會員列表

會員通知

// 這一大段JS就是為了做收縮/展開導航欄而用的！

export default {

name: "Main",

data: function () {

return {

isCollapse: false, // 決定左側導航欄是否展開

}

},

computed: {

collpaseIcon: function () { // 左側導航欄是否展開狀態的圖標

// 如果是展開狀態就圖標向右，否則圖標向左

return this.isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold';

},

collpaseWidth: function () { // 左側導航欄是否展開狀態的寬度

// 如果是展開狀態就導航欄寬度為65px，否則200px

return this.isCollapse ? '65px' : '200px';

}

},

methods: {

changeCollapse: function () { // 更改左側導航欄展示狀態

this.isCollapse = !this.isCollapse;

}

}

}

/*整體顯示區域布局樣式*/

.el-container {

height: 100%;

}

.el-header, .el-main {

padding: 0;

}

/*左邊導航欄具體樣式*/

.el-menu-vertical-demo.el-menu {

padding-left: 20px;

text-align: left;

height: 100%;

padding: 0;

}

el-container > .el-menu-vertical-demo.el-menu {

padding: 0;

}

.el-submenu .el-menu-item, .el-menu-item {

min-width: 50px;

}

.el-menu-item {

padding: 0;

}

這時候頁面就已經做好了，我們來看下效果：

image

項目github地址如下：

clone到本地即可運行，如果對你有幫助請在github上點個star，我還會繼續更新更多【項目實踐】哦！

博客、Github、微信公眾號都是：RudeCrab，歡迎關注！如果對你有幫助可以收藏、點贊、star、在看、分享~~ 你的支持，就是我寫文的最大動力

微信上轉載請聯系公眾號開啟白名單，其他地方轉載請標明原地址、原作者！

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...的全部內容，希望文章能夠幫你解決所遇到的問題。

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