【項目實踐】使用Vue.js和ElementUI快速實現後臺管理系統的界面佈局

時間  2020-02-24
標籤 javascript css html vue java node git github vue-router npm 欄目 JavaScript 简体版
原文   原文鏈接

前言

你們都知道，後臺管理界面不須要很酷炫的動畫效果，也不須要花裏胡哨的界面佈局，只須要簡潔易用、清爽明瞭的界面以便於管理數據。而如今廣泛的後臺管理系統的界面佈局都差很少，上中下結構，而後左邊是導航欄。隨便貼兩個Bootstrap的主題模板就是這樣的：javascript

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

準備

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

node.js -- v12.16.1vue

npm -- 6.13.4java

@vue/cli -- 4.2.2node

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

首先，經過Vue-cli工具來快速搭建起一個Vue的項目（這裏就不講解怎麼用Vue-cli搭建項目了，文末有項目的github演示地址，下載下來便可運行）github

項目搭建好後呢，接下來要導入咱們要用的組件，我在這裏會用到ElementUI和font-awesome圖標（固然也能夠直接使用ElementUI中的圖標）。 使用npm來安裝兩個工具： npm install element-ui npm install font-awesome 安裝完畢後，在main.js裏導入兩個工具，這樣才能在項目中使用：vue-router

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文件，這個是整個項目的界面入口，因此咱們在這裏定義好最基本的視圖：npm

<template>
    <div id="app">
        <!--主路由視圖-->
        <router-view/>
    </div>
</template>

<style lang="scss"> // 總體佈局樣式，讓整個視圖都鋪滿 html, body, #app { height: 100%; width: 100%; margin: 0; padding: 0; } </style>
複製代碼

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

而後咱們在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里布置最基本的結構，即上中下，中間又分左右：

<template>
    <el-container>
        <!--頂部-->
        <el-header></el-header>

        <!--中央區域-->
        <el-main>
            <el-container>
                <!--左側導航欄-->
                <el-aside></el-aside>
                <!--主內容顯示區域，數據內容都是在這裏面渲染的-->
                <el-main></el-main>
            </el-container>
        </el-main>

        <!--底部-->
        <el-footer></el-footer>
    </el-container>
</template>
複製代碼

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

咱們將Main.vue裏的內容完整給寫好，注意看註釋：

<template>
    <el-container>
        <!--頂部-->
        <el-header style="border-bottom: 1px solid gray;">
            <el-row style="margin: 10px 15px">
                <el-col :span="1">
                    <!--收縮條-->
                    <a href="#" @click="changeCollapse" style="font-size: 25px;color:#909399;"><i :class="collpaseIcon"></i></a>
                </el-col>
            </el-row>
        </el-header>
        <!--中央區域-->
        <el-main>
            <el-container>
                <!--左側導航欄-->
                <el-aside :style="{width:collpaseWidth}">
                    <!--default-active表明導航欄默認選中哪一個index, :collapse決定導航欄是否展開，爲boolean類型 :router決定導航欄是否開啓路由模式，即在菜單item上設置路由是否生效，值爲boolean類型-->
                    <el-menu default-active="0" class="el-menu-vertical-demo" :collapse="isCollapse" :router="true" >
                        <!--index設置當前item的下標，:route則是傳一個對象進行，指定路由-->
                        <el-menu-item index="0" :route="{name:'Index'}">
                            <i class="fa fa-magic"></i>
                            <span slot="title"> 首頁</span>
                        </el-menu-item>

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="fa fa-cogs"></i><span> 系統管理</span>
                            </template>

                            <el-menu-item index="/Setting" :route="{name:'Setting'}"><i class="fa fa-cog"></i> 網站設置
                            </el-menu-item>
                            <el-menu-item index="1-2"><i class="fa fa-user-circle-o"></i> 角色管理</el-menu-item>
                            <el-menu-item index="1-2"><i class="fa fa-object-group"></i> 店鋪模板</el-menu-item>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="fa fa-users"></i>
                                <span> 會員管理</span>
                            </template>

                            <el-menu-item index="2-1" :route="{name:'Customer'}"><i class="fa fa-address-card-o"></i>
                                會員列表
                            </el-menu-item>
                            <el-menu-item index="2-2"><i class="fa fa-envelope-o"></i> 會員通知</el-menu-item>
                        </el-submenu>


                    </el-menu>

                </el-aside>
                <!--主內容顯示區域-->
                <el-main>
                    <!--路由渲染-->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-main>
        <!--底部-->
        <el-footer style="border-top: 1px solid gray"></el-footer>
    </el-container>
</template>

<script> // 這一大段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; } } } </script>

<style scoped> /*總體顯示區域佈局樣式*/ .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; } </style>
複製代碼

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

項目github地址以下：

github.com/RudeCrab/ru…

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程