学习vue后台管理框架4(主体)

最新推荐文章于 2025-11-01 17:37:27 发布

原创最新推荐文章于 2025-11-01 17:37:27 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个基于Vue的后台管理系统的设计与实现，包括自定义组件、响应式布局调整、国际化设置等关键技术点。

学习的框架:https://github.com/PanJiaChen/vue-element-admin

膜拜下大神

作者文章地址：https://segmentfault.com/a/1190000009275424#articleHeader15

<template>
	<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
		<sidebar class="sidebar-container"></sidebar> 
		<div class="main-container">
			<navbar></navbar>  
			<!-- 顶部 -->
			<tags-view></tags-view>
			<!-- tag -->
			<app-main></app-main>
			<!-- 主体 -->
		</div>
	</div>
</template>

##左侧导航栏

import ScrollBar from "@/components/ScrollBar";

这是一个自定义组件，把导航栏包起来了

<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

在左侧滚动，触发handleScroll函数
http://www.runoob.com/jsref/event-onwheel.html

滚动：
http://www.jb51.net/article/119256.htm

##右侧内容分为上中下
上（控制展开）

 mutations: {
        TOGGLE_SIDEBAR: state => {
            if (state.sidebar.opened) {
                Cookies.set('sidebarStatus', 1)
            } else {
                Cookies.set('sidebarStatus', 0)
            }
            state.sidebar.opened = !state.sidebar.opened
        },
        SET_LANGUAGE: (state, language) => { //通过mutations来改变中英文状态
            state.language = language
            Cookies.set('language', language)
        }
    },
 actions: {
        toggleSideBar({ commit }) {
            commit('TOGGLE_SIDEBAR')
        },
        setLanguage({ commit }, language) {
            // 通过actions来改变中英文状态 （还是通过commit，调用mutations中的方法）
            // 只是在这个方法中可以异步来改变
            commit('SET_LANGUAGE', language)
        }
    }
    
toggleSideBar() {
      this.$store.dispatch('toggleSideBar')
       //改变state.sidebar.opened和cookie来展示状态
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
      })
    }

上（面包屑）

watch: { //监听路由，路由变化 执行this.getBreadcrumb()
    $route() {
      this.getBreadcrumb() 
    }
  }

$route: https://router.vuejs.org/zh-cn/api/route-object.html

created() {//钩子函数
    this.getBreadcrumb()
  }

上（全屏）

http://element.eleme.io/#/zh-CN/component/tooltip

上（换肤）
https://panjiachen.github.io/vue-element-admin-site/#/theme

上（登出）

中（tagView）
Array.from : https://www.cnblogs.com/kongxianghai/p/7417210.html

下（主体）
keep-alive进行缓存
https://segmentfault.com/a/1190000008123035