Vue + ElementUI 实现后台管理系统模板 -- 前端篇（四）：定义主页面

一、定义主页面

 

主页面 可以拆分成多个组件，每个组件负责一部分页面的显示。
　　拆分成 Header、Aside、Footer、Content 四个页面。
其中：
　　Header          用于定义导航栏信息
　　Aside             用于定义菜单栏信息

       Footer             用于定义底部信息
　　Content         用于显示各个菜单选项的页面

1》config配置路径

---

（1）简介

（2）安装

npm install path -S

（3）配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
    port: 4000
  },
  configureWebpack: {
    resolve: {
      alias: {
        '~': resolve('./'),
        '@': resolve('src'),
        "assets": "@/assets",
      }
    }
  }
}

（4）重启服务

2》home.vue

---

 （1）简介

结构页

（2）页面

<template>
  <el-container class="container" v-loading="false" element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading">
    <!-- 侧边栏 -->
    <Aside :foldAside="foldAside" />
    <!--
        direction="vertical"  用于垂直布局
    -->
    <el-container direction="vertical">
      <!-- 头部导航栏 -->
      <el-header height="50"> <Header /></el-header>
      <!-- 内容 -->
      <el-container class="wrapper">
        <Content />
      </el-container>
      <!-- 底部 -->
      <div class="footer">
        <Footer />
      </div>
    </el-container>
  </el-container>
</template>

<script>
import Header from '@/components/common/header.vue';
import Aside from '@/components/common/aside.vue';
import Footer from '@/components/common/footer.vue';
import Content from '@/components/common/content.vue';

export default {
  name: 'Home',
  components: {
    Header,
    Aside,
    Footer,
    Content,
  },
  data() {
    return {
      foldAside: true,
    };
  },
  methods: {
    foldOrOpen(data) {
      this.foldAside = data;
    },
  },
};
</script>
<style>
.container {
  height: 100%;
}
.wrapper {
  height: calc(100vh - 100px);
}
.wrapper_con {
  padding-bottom: 0;
}
</style>

3》header.vue 

---

（1）简介
　　通过导航栏，可以进行一些操作。比如：折叠侧边栏、修改密码、退出登录等。

（2）页面代码（路径地址：/src/components/common/header.vue）

<template>
  <div class="header">
    <!-- 是否展开侧边栏 -->
    <div class="header-title" @click="foldOrOpen">
      <a class="el-icon-s-fold" v-if="foldAside" title="折叠侧边栏" />
      <a class="el-icon-s-unfold" v-else title="展开侧边栏" />
    </div>
    <!-- 设置、文档、用户设置等 -->
    <div class="header-menu">
      <el-menu mode="horizontal" class="header-menu-submenu">
        <el-menu-item title="设置" index="1" to="/">网站首页 </el-menu-item>
        <el-menu-item title="清除缓存" index="2" @click="onClear">清除缓存 </el-menu-item>
        <el-menu-item title="系统更新" index="3" @click="onUpdate"> 系统更新 </el-menu-item>
        <el-menu-item title="帮助" index="5">帮助</el-menu-item>
        <el-menu-item title="设置" index="4"> <i class="el-icon-setting"></i>设置 </el-menu-item>
        <!-- 用户设置 -->
        <el-submenu title="用户设置" index="6">
          <template slot="title">
            <span class="header-span"> <img src="@/assets/images/avatar.png" :alt="userName" /> {{ userName }} </span>
          </template>
          <el-menu-item index="6-1" @click="showPasswordBox"> <i class="el-icon-edit"></i>修改密码 </el-menu-item>
          <el-menu-item index="6-2" @click="logout"> <i class="el-icon-close"></i>退出 </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      // 是否展开侧边栏
      foldAside: true,
      // 默认用户名
      userName: 'admin',
      // 是否展开密码框
      UpdatePasswordVisible: false,
    };
  },
  components: {

  },
  methods: {
    // 展开密码修改框
    showPasswordBox() {
      this.UpdatePasswordVisible = true;
      // this.$nextTick 表示数据渲染后，执行密码框初始化
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 展开、折叠侧边栏
    foldOrOpen() {
      alert('侧边栏逻辑未完成');
      console.log('foldOrOpen');
    },
    // 退出登录，回到登录界面
    logout() {
      // TODO：退出逻辑待完成
      alert('退出逻辑未完成');
      this.$router.push({
        name: 'Login',
      });
    },
    // 清除缓冲
    onClear() {
      console.log('onClear');
    },
    // 系统更新
    onUpdate() {
      console.log('onUpdate');
    },
  },
};
</script>

<style>
.header {
  padding: 0 10px;
  display: flex;
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #e6e6e6;
}

.header-title {
  height: 50px;
  width: 50px;
  float: left;
  font-size: 30px;
  cursor: pointer;
}

.header-menu {
  height: 50px;
  width: 100%;
  flex: 1;
  line-height: 50px;
  font-size: 30px;
}
.header-menu-submenu {
  float: right;
}
.header-submenu-a {
  text-decoration: none;
  color: #4cc4b8;
  font-weight: bold;
  font-size: 14px;
}
.header-submenu-a:hover {
  background-color: #2c3e50;
}
.el-menu--horizontal > .el-menu-item,
.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 10px !important;
}
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: auto !important;
}
.header-span img {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 5px 5px 10px 10px;
  border-radius: 50%;
}
.header-span {
  font-size: 20px;
  border-radius: 50%;
}
</style>

4》aside.vue

---

（1）简介
　　用于定义侧边栏，显示菜单。

（2）页面(路径地址：/src/components/common/aside.vue)

<template>
  <div>
    <!-- 系统 Logo -->
    <el-aside class="header-logo" :width="asideWidth">
      <div @click="$router.push({ name: 'Home' })">
        <a v-if="foldAside">CMS管理系统</a>
        <a v-else>CMS</a>
      </div>
    </el-aside>
    <el-aside class="aside" :width="asideWidth" :class="'icon-size-' + iconSize">
      <el-scrollbar style="height: 100%; width: 100%;">
        <!--
            default-active 表示当前选中的菜单，默认为 home。
            collapse 表示是否折叠菜单，仅 mode 为 vertical（默认）可用。
            collapseTransition 表示是否开启折叠动画，默认为 true。
            background-color 表示背景颜色。
            text-color 表示字体颜色。
        -->
        <el-menu :default-active="menuActiveName || 'home'" :collapse="!foldAside" :collapseTransition="false" background-color="#263238" text-color="#8a979e">
          <el-menu-item index="home" @click="$router.push({ name: 'Home' })" style="width:200px">
            <i class="el-icon-s-home"></i>
            <span slot="title">栏目管理</span>
          </el-menu-item>
          
          <el-submenu index="demo" style="width:200px">
            <template slot="title">
              <i class="el-icon-star-off"></i>
              <span>demo</span>
            </template>
            <el-menu-item index="demo-echarts" @click="$router.push({ name: 'Echarts' })">
              <i class="el-icon-s-data"></i>
              <span slot="title">echarts</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'Ueditor' })">
              <i class="el-icon-document"></i>
              <span slot="title">ueditor</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script>
export default {
  name: 'Aside',
  data() {
    return {
      foldAside: true,
      // 保存当前选中的菜单
      menuActiveName: 'home',
      // 保存当前侧边栏的宽度
      asideWidth: '200px',
      // 用于拼接当前图标的 class 样式
      iconSize: 'true',
    };
  },
};
</script>

<style>
.aside {
  margin-bottom: 0;
  height: 100%;
  max-height: calc(100% - 50px);
  width: 100%;
  max-width: 200px;
  background-color: #263238;
  text-align: left;
  right: 0;
}

.header-logo {
  background-color: #17b3a3;
  text-align: center;
  height: 50px;
  line-height: 50px;
  width: 200px;
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 0;
  cursor: pointer;
}
.el-submenu .el-menu-item {
  max-width: 200px !important;
}
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.icon-size-false i {
  font-size: 30px !important;
}
.icon-size-true i {
  font-size: 18px !important;
}
</style>

5》footer.vue

---

（1）简介
　　底部版权信息

（2）页面(路径地址：/src/components/common/footer.vue)

<template>
  <div class="my_footer">Copyright © {{ startYear }}-{{ endYear }} GoldSunny 版权所有</div>
</template>
<script>
export default {
  name: 'Footer',
  data() {
    return {
      startYear: new Date().getFullYear(),
      endYear: new Date().getFullYear() + 1,
    };
  },
};
</script>
<style scoped>
.my_footer {
  background: #eee;
  color: #666;
  font-size: 14px;
  line-height: 36px;
}
</style>

6》content.vue

---

（1）简介
　　内容区域

（2）页面(路径地址：/src/components/common/content.vue)

<template>
  <el-main class="content">
    <keep-alive>
      <router-view />
    </keep-alive>
  </el-main>
</template>

<script>
export default {
  name: 'Content',
};
</script>

<style>
.el-main {
  padding: 15px !important;
}
.content {
  background-color: #fff;
}
</style>

7》修改路由

routes: [{
      path: "/",
      name: "Home",
      component: Home,
      children: [{
        path: "/about",
        name: "about",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import( /* webpackChunkName: "about" */ "./views/About.vue")
      }, ]
    },

8》最终页面样式

二、路由整理

（1）简介
　　想要各个组件页面间能够顺利跳转，就需要 router 来操作了。
　　此处简单写了路由跳转规则，后续会进行修改。

（2）定义路由跳转规则
　　path 指的是 路径。
　　redirect 指的是 需要跳转的路径。
　　name 指的是 路由的名字（此项目中，均使用 name 进行路由跳转）。
　　component 指的是 路由的组件，用于显示页面（<router-view /> 会加载组件）。
　　children 指的是 子路由（路由中显示另一个路由）。

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

const routes = [{
    path: "/",
    name: "Home",
    component: Home,
    children: [{
      path: "/about",
      name: "About",
      meta: {
        name: '关于我们'
      },
      component: () =>
        import( /* webpackChunkName: "about" */ "./views/About.vue")
    }, ]
  },
  {
    path: "/404",
    name: "404",
    component: () => import("./views/404.vue")
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("./views/login.vue")
  }
]

const router = new Router({
  routes, // 用于定义 路由跳转 规则
  mode: "history", // mode 用于去除地址中的 #
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ // scrollBehavior 用于定义路由切换时，页面滚动。
    y: 0
  })
});
// 解决相同路径跳转报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    err
  })
}
export default router

页面展示