日韩在线观看视频,韩国三级,嗑室友cp后我被爆炒了

前言

大家都知道，后臺(tái)管理界面不需要很酷炫的動(dòng)畫效果，也不需要花里胡哨的界面布局，只需要簡(jiǎn)潔易用、清爽明了的界面以便于管理數(shù)據(jù)。而現(xiàn)在普遍的后臺(tái)管理系統(tǒng)的界面布局都差不多，上中下結(jié)構(gòu)，然后左邊是導(dǎo)航欄。隨便貼兩個(gè)Bootstrap的主題模板就是這樣的：

image

這其中難的不是布局，而是如何點(diǎn)擊左側(cè)導(dǎo)航欄來(lái)渲染中央顯示界面（路由）。在這里我會(huì)用Vue.js和ElementUI來(lái)快速搭建起這樣的后臺(tái)管理界面布局！

準(zhǔn)備

本文搭建項(xiàng)目時(shí)的工具以及版本號(hào)如下：

node.js -- v12.16.1

npm -- 6.13.4

@vue/cli -- 4.2.2

版本有差異也沒(méi)有事情，變化不會(huì)太大。

首先，通過(guò)Vue-cli工具來(lái)快速搭建起一個(gè)Vue的項(xiàng)目（這里就不講解怎么用Vue-cli搭建項(xiàng)目了，文末有項(xiàng)目的github演示地址，下載下來(lái)即可運(yùn)行）

項(xiàng)目搭建好后呢，接下來(lái)要導(dǎo)入我們要用的組件，我在這里會(huì)用到ElementUI和font-awesome圖標(biāo)（當(dāng)然也可以直接使用ElementUI中的圖標(biāo)）。
使用npm來(lái)安裝兩個(gè)工具：
npm install element-ui
npm install font-awesome
安裝完畢后，在main.js里導(dǎo)入兩個(gè)工具，這樣才能在項(xiàng)目中使用：

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

// 導(dǎo)入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 導(dǎo)入font-awesome(導(dǎo)入就可以直接用了)
import 'font-awesome/scss/font-awesome.scss'

// 使用ElementUI
Vue.use(ElementUI); 

Vue.config.productionTip = false

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

配置路由

所有都準(zhǔn)備好了后，我們來(lái)修改App.vue文件，這個(gè)是整個(gè)項(xiàng)目的界面入口，所以我們?cè)谶@里定義好最基本的視圖：

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

<style lang="scss">
    // 整體布局樣式，讓整個(gè)視圖都鋪滿
    html, body, #app {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>

視圖配置好后，接下來(lái)要配置路由設(shè)置，我們先新建四個(gè)頁(yè)面組件：Main.vue，Index.Vue，Setting.vue，404.vue。這個(gè)等下都要用的，其中Index.Vue和Setting.vue都是Main.vue的嵌套路由，這里為了做演示，Index.vue和Setting.vue里面就只寫一個(gè)簡(jiǎn)單的一級(jí)標(biāo)題。此時(shí)我們的項(xiàng)目結(jié)構(gòu)如下：

image

然后我們?cè)趓outer的js文件里開始配置路由，注意看注釋：

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

Vue.use(VueRouter)

const routes = [
    {
        // 重定向，用來(lái)指向一打開網(wǎng)頁(yè)就跳轉(zhuǎn)到哪個(gè)路由
        path: '/',
        redirect: '/main'
    },
    {
        // 首頁(yè)
        path: '/main',
        name: 'Main',
        component: () => import('../views/Main.vue'),
        children:[// 開始嵌套路由，這下面的所有路由都是Main路由的子路由
            {
                path:'/', // 嵌套路由里默認(rèn)是哪個(gè)網(wǎng)頁(yè)
                redirect: '/index'
            },
            {
                path:'/index', // 首頁(yè)的路由
                name:'Index',
                component:() => import('../views/Index.vue')
            },
            {
                path:'/setting', // 設(shè)置頁(yè)面的路由
                name:'Setting',
                component:() => import('../views/Setting.vue')
            }
        ]
    },
    {
        path:'/*', // 注意，這里不是嵌套路由了，這是為了設(shè)置404頁(yè)面，一定要放在最后面，這樣當(dāng)服務(wù)器找不到頁(yè)面的時(shí)候就會(huì)全部跳轉(zhuǎn)到404
        name:'404',
        component: () => import('../views/404.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

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

布局

我們先在Main.vue里布置最基本的結(jié)構(gòu)，即上中下，中間又分左右：

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

        <!--中央?yún)^(qū)域-->
        <el-main>
            <el-container>
                <!--左側(cè)導(dǎo)航欄-->
                <el-aside></el-aside>
                <!--主內(nèi)容顯示區(qū)域，數(shù)據(jù)內(nèi)容都是在這里面渲染的-->
                <el-main></el-main>
            </el-container>
        </el-main>

        <!--底部-->
        <el-footer></el-footer>
    </el-container>
</template>

這樣最基本的布局就好了，我們接下來(lái)只需要在對(duì)應(yīng)的區(qū)域渲染好內(nèi)容就行，這里最主要的就是使用ElementUI其中的路由功能。

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

<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>
        <!--中央?yún)^(qū)域-->
        <el-main>
            <el-container>
                <!--左側(cè)導(dǎo)航欄-->
                <el-aside :style="{width:collpaseWidth}">
                    <!--default-active代表導(dǎo)航欄默認(rèn)選中哪個(gè)index, :collapse決定導(dǎo)航欄是否展開，為boolean類型
                    :router決定導(dǎo)航欄是否開啟路由模式，即在菜單item上設(shè)置路由是否生效，值為boolean類型-->
                    <el-menu
                            default-active="0"
                            class="el-menu-vertical-demo"
                            :collapse="isCollapse"
                            :router="true"
                    >
                        <!--index設(shè)置當(dāng)前item的下標(biāo)，:route則是傳一個(gè)對(duì)象進(jìn)行，指定路由-->
                        <el-menu-item index="0" :route="{name:'Index'}">
                            <i class="fa fa-magic"></i>
                            <span slot="title"> 首頁(yè)</span>
                        </el-menu-item>

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

                            <el-menu-item index="/Setting" :route="{name:'Setting'}"><i class="fa fa-cog"></i> 網(wǎng)站設(shè)置
                            </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> 會(huì)員管理</span>
                            </template>

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


                    </el-menu>

                </el-aside>
                <!--主內(nèi)容顯示區(qū)域-->
                <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就是為了做收縮/展開導(dǎo)航欄而用的！
    export default {
        name: "Main",
        data: function () {
            return {
                isCollapse: false, // 決定左側(cè)導(dǎo)航欄是否展開
            }
        },
        computed: {
            collpaseIcon: function () { // 左側(cè)導(dǎo)航欄是否展開狀態(tài)的圖標(biāo)
                // 如果是展開狀態(tài)就圖標(biāo)向右，否則圖標(biāo)向左
                return this.isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold';
            },
            collpaseWidth: function () { // 左側(cè)導(dǎo)航欄是否展開狀態(tài)的寬度
                // 如果是展開狀態(tài)就導(dǎo)航欄寬度為65px，否則200px
                return this.isCollapse ? '65px' : '200px';
            }
        },
        methods: {
            changeCollapse: function () { // 更改左側(cè)導(dǎo)航欄展示狀態(tài)
                this.isCollapse = !this.isCollapse;
            }
        }
    }
</script>

<style scoped>
    /*整體顯示區(qū)域布局樣式*/
    .el-container {
        height: 100%;
    }

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

    /*左邊導(dǎo)航欄具體樣式*/
    .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>

這時(shí)候頁(yè)面就已經(jīng)做好了，我們來(lái)看下效果：

image

項(xiàng)目github地址如下：

[https://github.com/RudeCrab/rude-java)

clone到本地即可運(yùn)行，如果對(duì)你有幫助請(qǐng)?jiān)趃ithub上點(diǎn)個(gè)star，我還會(huì)繼續(xù)更新更多【項(xiàng)目實(shí)踐】哦！

博客、Github、微信公眾號(hào)都是：RudeCrab，歡迎關(guān)注！如果對(duì)你有幫助可以收藏、點(diǎn)贊、star、在看、分享~~ 你的支持，就是我寫文的最大動(dòng)力

微信上轉(zhuǎn)載請(qǐng)聯(lián)系公眾號(hào)開啟白名單，其他地方轉(zhuǎn)載請(qǐng)標(biāo)明原地址、原作者！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

【項(xiàng)目實(shí)踐】使用Vue.js和ElementUI快速實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的界面布局

【項(xiàng)目實(shí)踐】使用Vue.js和ElementUI快速實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的界面布局

前言

準(zhǔn)備

配置路由

布局

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

【項(xiàng)目實(shí)踐】使用Vue.js和ElementUI快速實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的界面布局

前言

準(zhǔn)備

配置路由

布局

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频