preface

As we all know, the background management interface does not need to be very cool animation effects, also do not need a fancy interface layout, just simple and easy to use, clean and clear interface in order to manage data. And now the general background management system interface layout is similar, the upper middle structure, and then the left is the navigation bar. A theme template for any two Bootstrap themes looks like this:

The hard part is not the layout, but how to click on the left navigation bar to render the central display (routing). Here I will use vue.js and ElementUI to quickly set up such a background management interface layout!

To prepare

The tools and version numbers for building the project are as follows:

Node. Js — — v12.16.1

NPM – 6.13.4

@vue/cli — 4.2.2

There is no difference in the version, the change will not be too big.

First of all, use vuE-CLI tool to quickly build a Vue project (here will not explain how to use vue-CLI to build a project, there is a project github demo address at the end of the article, download it to run).

Now that the project is set up, it’s time to import the components we’re going to use. I’ll use ElementUI and the font-awesome icon here (you can also use ICONS in ElementUI directly). NPM install element-ui NPM install font-awesome After installation, import the two tools in main.js so that you can use them in your project:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

/ / import ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// select * from 'awesome';
import 'font-awesome/scss/font-awesome.scss'

/ / use ElementUI
Vue.use(ElementUI); 

Vue.config.productionTip = false

new Vue({
    router,
    render: h= > h(App)
}).$mount('#app')

Copy the code

Configure the routing

With everything in place, let’s modify the app. vue file, which is the interface entry for the entire project, so here we define the basic view:

<template>
    <div id="app">
        <! -- Primary route view -->
        <router-view/>
    </div>
</template>

<style lang="scss">// Overall layout style, so that the entire view is coveredhtml.body.#app {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>
Copy the code

Vue, Index.Vue, setting. vue, and 404.vue. Vue and Setting. Vue are nested sets of Main. Vue, here for demonstration, Index.Vue and Setting. At this point, our project structure is as follows:

The router js file is used to configure the route.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        // Redirect, used to point to which route to jump to as soon as the page is opened
        path: '/'.redirect: '/main'
    },
    {
        / / home page
        path: '/main'.name: 'Main'.component: () = > import('.. /views/Main.vue'),
        children: [// All the routes below are children of the Main route
            {
                path:'/'.// Which page is the default in the nested pattern
                redirect: '/index'
            },
            {
                path:'/index'.// The route of the home page
                name:'Index'.component:() = > import('.. /views/Index.vue')}, {path:'/setting'.// Set the route of the page
                name:'Setting'.component:() = > import('.. /views/Setting.vue'}]}, {path:'/ *'.// This is not nested, this is to set the 404 page, must be at the end of the page, so that when the server can not find the page will jump to 404
        name:'404'.component: () = > import('.. /views/404.vue')}]const router = new VueRouter({
    mode: 'history'.base: process.env.BASE_URL,
    routes
})

export default router
Copy the code

The routing is configured, and the most important thing is the layout in main. vue

layout

Let’s start with the basic structure in main. vue, which is top, middle, bottom, and left and right in the middle:

<template>
    <el-container>
        <! - the top -- -- >
        <el-header></el-header>

        <! -- Central region -->
        <el-main>
            <el-container>
                <! Left navigation bar -->
                <el-aside></el-aside>
                <! -- Main content display area, where data content is rendered -->
                <el-main></el-main>
            </el-container>
        </el-main>

        <! -- -- -- > at the bottom of the
        <el-footer></el-footer>
    </el-container>
</template>
Copy the code

That’s the basic layout, we just need to render the content in the corresponding area, the main thing here is to use the routing functionality in ElementUI.

We have completed the contents of main. vue. Note the comments:

<template>
    <el-container>
        <! - the top -- -- >
        <el-header style="border-bottom: 1px solid gray;">
            <el-row style="margin: 10px 15px">
                <el-col :span="1">
                    <! -- Shrink bar -->
                    <a href="#" @click="changeCollapse" style="font-size: 25px; color:#909399;"><i
                            :class="collpaseIcon"></i></a>
                </el-col>
            </el-row>
        </el-header>
        <! -- Central region -->
        <el-main>
            <el-container>
                <! Left navigation bar -->
                <el-aside :style="{width:collpaseWidth}">
                    <! --default-active specifies which index is selected by default, :collapse Specifies whether to collapse the navigation bar. For Boolean :router specifies whether to collapse the navigation bar.
                    <el-menu
                            default-active="0"
                            class="el-menu-vertical-demo"
                            :collapse="isCollapse"
                            :router="true"
                    >
                        <! --index sets the index of the current item, and :route sets the route of an object -->
                        <el-menu-item index="0" :route="{name:'Index'}">
                            <i class="fa fa-magic"></i>
                            <span slot="title">Home page</span>
                        </el-menu-item>

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="fa fa-cogs"></i><span>System management</span>
                            </template>

                            <el-menu-item index="/Setting" :route="{name:'Setting'}"><i class="fa fa-cog"></i>Web site set up</el-menu-item>
                            <el-menu-item index="1-2"><i class="fa fa-user-circle-o"></i>Role management</el-menu-item>
                            <el-menu-item index="1-2"><i class="fa fa-object-group"></i>Shop template</el-menu-item>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="fa fa-users"></i>
                                <span>Member management</span>
                            </template>

                            <el-menu-item index="2-1" :route="{name:'Customer'}"><i class="fa fa-address-card-o"></i>The member list</el-menu-item>
                            <el-menu-item index="2-2"><i class="fa fa-envelope-o"></i>Member of the notice</el-menu-item>
                        </el-submenu>


                    </el-menu>

                </el-aside>
                <! -- Main content display area -->
                <el-main>
                    <! -- Route Render -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-main>
        <! -- -- -- > at the bottom of the
        <el-footer style="border-top: 1px solid gray"></el-footer>
    </el-container>
</template>

<script>
    // This large section of JS is used to shrink/expand the navigation bar!
    export default {
        name: "Main".data: function () {
            return {
                isCollapse: false.// Decide whether to expand the left navigation bar}},computed: {
            collpaseIcon: function () { // Whether to expand the status icon in the left navigation bar
                // The icon moves to the right if it is expanded; otherwise, the icon moves to the left
                return this.isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold';
            },
            collpaseWidth: function () { // Whether the left navigation bar expands the state width
                // Set the width of the navigation bar to 65px if it is expanded, or 200px otherwise
                return this.isCollapse ? '65px' : '200px'; }},methods: {
            changeCollapse: function () { // Change the display status of the left navigation bar
                this.isCollapse = !this.isCollapse; }}}</script>

<style scoped>
    /* Overall display area layout style */
    .el-container {
        height: 100%;
    }

    .el-header..el-main {
        padding: 0;
    }

    /* Left navigation bar specific style */
    .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>
Copy the code

At this point the page is ready, let’s look at the effect:

The github address of the project is as follows:

Github.com/RudeCrab/ru…

Clone can be run locally, if it is helpful to you, please click a star on Github, I will continue to update more!

Blog, Github, wechat public account is: RudeCrab, welcome to follow! If it is helpful to you, you can collect, like, star, look at, share ~~ your support, is the biggest power of my writing

Wechat reprint please contact the public number to open the white list, other places reprint please indicate the original address, the original author!