import Vue from 'vue' import Vuex from 'vuex' import state from "./state"; import mutations from "./mutations"; import actions from "./actions"; import getters from "./getters"; //引入vuex 数据持久化插件 import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) export default new Vuex.Store({ state, mutations, actions, getters, plugins: [createPersistedState()] })
至此vuex引入完毕，如同学们还有不明白的可以去翻阅vuex文档。
九、首页布局介绍现在我们开始进行页面的布局。首先我们来分析下首页的情况
侧边栏
顶部栏
内容部分
首先我们在 view文件夹下面新建一个 layout文件夹，里面再添加一个 layout.vue,以及 compentents文件夹。
侧边栏
在compentents文件夹下面新建一个 Aside.vue文件，实现路由跳转相关的逻辑,运用了element导航菜单的路由模式，如有不明白的可以去去看看。
<template> <div> <el-menu :default-active="onRoutes" @open="handleOpen" @close="handleClose" :collapse="isCollapse" active-text-color="#bdb7ff" router > <template v-for="item in items"> <template v-if="item.subs"> <el-submenu :index="item.index" :key="item.index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </template> <template v-for="subItem in item.subs"> <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index"> <template slot="title">{{ subItem.title }}</template> <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index" >{{ threeItem.title }}</el-menu-item> </el-submenu> <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item> </template> </el-submenu> </template> <template v-else> <el-menu-item :index="item.index" :key="item.index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </template> </template> </el-menu> </div> </template>
import { mapState } from "vuex"; export default { data() { return { //配置目录 items: [ { icon: "el-icon-edit-outline", index: "home", title: "系统首页" }, { icon: "el-icon-edit-outline", index: "icon", title: "自定义图标" }, { icon: "el-icon-edit-outline", index: "component", title: "组件", subs: [ { index: "editor", title: "富文本编译器" }, { index: "countTo", title: "数字滚动" }, { index: "trees", title: "树形控件", subs: [ { index: "tree", title: "自定义树" }, { index: "treeSelect", title: "下拉树" } // ,{ // index:'treeTable', // title:'表格树', // } ] }, ] }, { icon: "el-icon-edit-outline", index: "draggable", title: "拖拽", subs: [ { index: "draglist", title: "拖拽列表" }, { index: "dragtable", title: "拖拽表格" } ] }, { icon: "el-icon-edit-outline", index: "charts", title: "图表", subs: [ { index: "cricle", title: "饼图" }, ] }, { icon: "el-icon-edit-outline", index: "7", title: "错误处理", subs: [ { index: "permission", title: "权限测试" }, { index: "404", title: "404页面" } ] }, ] }; }, computed: { onRoutes() { return this.$route.path.replace("https://www.jb51.net/", ""); }, ...mapState(["isCollapse"]) //从vuex里面获取菜单是否折叠 }, methods: { //下拉展开 handleOpen(key, keyPath) { console.log(key, keyPath); }, //下来关闭 handleClose(key, keyPath) { console.log(key, keyPath); } } };
顶部栏
在 view/compentents文件夹下面新建一个 Header.vue
<template> <div> <div> <showAside :toggle-click="toggleClick"/> </div> <div> <div> <!-- 全屏显示 --> <div @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"> <i></i> </el-tooltip> </div> <!-- 消息中心 --> <div> <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom"> <router-link to="/tabs"> <i></i> </router-link> </el-tooltip> <span v-if="message"></span> </div> <!-- 用户名下拉菜单 --> <el-dropdown trigger="click"> <div> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3266090804,66355162&fm=26&gp=0.jpg" > {{username }}<i/> </div> <el-dropdown-menu slot="dropdown"> <router-link to="https://www.jb51.net/"> <el-dropdown-item>首页</el-dropdown-item> </router-link> <el-dropdown-item>个人设置</el-dropdown-item> <el-dropdown-item divided> <span @click="logout">退出登陆</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> </div> </template>