保姆级别的vue + ElementUI 搭建后台管理系统教程

2022-03-31 15:08:31

vue + ElementUI 搭建后台管理系统记录

本文档记录了该系统从零配置的完整过程

项目源码请访问：https://gitee.com/szxio/vue2Admin，如果感觉对你有帮助，请点一个小星星，O(∩_∩)O

新建项目

vue create vueadmin

安装 less-loader

安装

这里是一个小坑，安装 less-loader 时推荐安装指定版本，如果安装默认高版本会导致项目出错

cnpm i less-loader@6.0.0 -D

使用

<style lang="less" scoped>

div{

  b{

    span{

      color: red;

    }

  }

}

</style>

引入 ElementUI

安装

cnpm i element-ui -S

配置

import Vue from 'vue'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue'

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({

  render: h => h(App)

}).$mount('#app')

使用

<template>

  <div>

    <el-row>

      <el-button>默认按钮</el-button>

      <el-button type="primary">主要按钮</el-button>

      <el-button type="success">成功按钮</el-button>

      <el-button type="info">信息按钮</el-button>

      <el-button type="warning">警告按钮</el-button>

      <el-button type="danger">危险按钮</el-button>

    </el-row>

  </div>

</template>

配置 VueRouter

npm安装

安装

npm install vue-router

新建 scr/router/index.js，并添加如下代码

import Vue from "vue";

import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [

  {

    path: "/",

    name: "首页",

    component: () => import("../views/Home.vue"),

  },

  {

    path: "/about",

    name: "About",

    component: () => import("../views/About.vue"),

  },

];

const router = new VueRouter({

  mode: "history",

  base: process.env.BASE_URL,

  routes,

});

// 前置路由拦截器

router.beforeEach((to, from, next) => {

  // 设置当前页签名称

  document.title = to.name;

  next();

});

export default router;

配置前置路由拦截器动态设置每个页面的浏览器页签名称

修改 main.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import router from './router'

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

修改 App.vue

<template>

  <div id="app">

    <router-view />

  </div>

</template>

重启项目，分别访问如下地址可以查看页面效果

VueCli安装

如果项目是使用vue-cli创建的，则可以使用下面的命令直接生成上述代码及两个示例路由。它也会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件

vue add router

动态生成左侧菜单

添加layout组件

修改路由文件

首先我们要创建好 router 路由，修改 src\router\index.js 文件

import Vue from "vue";

import VueRouter from "vue-router";

import Layouts from "../layouts";

Vue.use(VueRouter);

const routes = [

  {

    path: "",

    redirect: "home",

    component: Layouts,

    children: [

      {

        path: "/home",

        meta: { title: "首页", icon: "el-icon-s-home" },

        component: () => import("../views/home"),

      },

      {

        path: "system",

        meta: { title: "系统管理", icon: "el-icon-s-home" },

        component: Layouts,

        children: [

          {

            path: "item1",

            meta: { title: "用户管理", icon: "el-icon-s-home" },

            component: () => import("../views/system/item1"),

          },

          {

            path: "item2",

            meta: { title: "产品管理", icon: "el-icon-s-home" },

            component: () => import("../views/system/item2"),

          },

        ],

      },

    ],

  },

];

const router = new VueRouter({

  mode: "history",

  base: process.env.BASE_URL,

  routes,

});

// 前置路由拦截器

router.beforeEach((to, from, next) => {

  // 设置当前页签名称

  document.title = to.meta.title;

  next();

});

export default router;

代码说明：

path：路由地址
redirect：重定向到指定路由
component：页面对应的组件
children：设置子路由，二级菜单
meta：页面的补充，用来声明页面的名称和图标等

我们将所有的页面都放在根路由的 children 下面，如果下面的菜单没有配置 children 属性，则表示该菜单是一级菜单，如果设置了则表示二级菜单，可以多级嵌套。上面的路由对应的修改views 文件夹下的文件结构：

新建src\layouts\index.vue

这个文件用来配置项目页面的外壳，左侧的菜单和顶部的面包屑都会在该文件夹中

页面结构分成三大部分：

左侧菜单
顶部面包屑
内容展示区域

对应成代码结构如下

<template>

  <div>

    <div>左侧菜单</div>

    <div>

      <div>头部面包屑</div>

      <div>内容展示区</div>

    </div>

  </div>

</template>

我们既然要将页面在内容展示区显示，所以我们对应的创建专门用来展示页面的组件。

所以接下来新建 src\layouts\components\AppContent.vue 组件。组件代码如下

<template>

    <div>

        <router-view/>

    </div>

</template>

没有看错，很简单，只要放置一个 router-view 标签即可。然后将 AppContent 组件注册到 layouts\index.vue 中

<template>

  <div>

    <div>左侧菜单</div>

    <div>

      <div>头部面包屑</div>

      <div>

        <AppContent />

      </div>

    </div>

  </div>

</template>

<script>

import AppContent from "./components/AppContent.vue";

export default {

  components: {

    AppContent,

  },

};

</script>

修改 App.vue

只保留 router-view

<template>

  <div>

    <router-view/>

  </div>

</template>

现在我们打开页面看到如下效果

修改页面样式

我们首页虽然已经展示到了 appcontent 组件中，但是样式并不是我们想要的效果。现在去修改src\layouts\index.vue文件，添加如下代码

<template>

  <div>

      <!-- 左侧菜单 -->

      <div class="left-menu-main">左侧菜单</div>

      <!-- 右侧操作区域 -->

      <div class="right-view-main">

          <!-- 头部面包屑 -->

          <div class="header">头部面包屑</div>

          <!-- 内容展示区 -->

          <AppContent class="content" />

      </div>

  </div>

</template>

<script>

import AppContent from "./components/AppContent.vue";

export default {

  components: {

    AppContent,

  }

};

</script>

<style scoped>

.left-menu-main {

  transition: width 0.28s;

  width: 210px !important;

  background-color: #304156;

  height: 100%;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  z-index: 1001;

  overflow: auto;

}

.header {

  position: fixed;

  height: 50px;

  width: calc(100vw - 210px);

  top: 0;

  right: 0;

  display: flex;

  align-items: center;

  border-bottom: 1px solid #ddd;

  padding-left: 15px;

  box-sizing: border-box;

}

.content {

  position: fixed;

  overflow: auto;

  height: calc(100vh - 50px);

  width: calc(100vw - 210px);

  bottom: 0;

  right: 0;

}

</style>

效果展示

引入左侧菜单

新建 src\layouts\components\ElMenu\index.vue 组件，初始化代码

<template>

  <div>

    <el-menu

      default-active="2"

      class="el-menu-vertical-demo"

      background-color="#545c64"

      text-color="#fff"

      active-text-color="#ffd04b"

    >

      <!-- 可展开菜单 -->

      <el-submenu index="1">

        <template slot="title">

          <i class="el-icon-location"></i>

          <span>导航一</span>

        </template>

        <el-menu-item index="3">

          <i class="el-icon-document"></i>

          <span slot="title">导航三</span>

        </el-menu-item>

      </el-submenu>

      <!-- 点击菜单 -->

      <el-menu-item index="2">

        <i class="el-icon-menu"></i>

        <span slot="title">导航二</span>

      </el-menu-item>

    </el-menu>

  </div>

</template>

<template>

  <div>

    <!-- 左侧菜单 -->

    <ElMenu class="left-menu-main"/>

    <!-- 右侧操作区域 -->

    <div class="right-view-main">

      <!-- 头部面包屑 -->

      <div class="header">头部面包屑</div>

      <!-- 内容展示区 -->

      <AppContent class="content" />

    </div>

  </div>

</template>

<script>

import AppContent from "./components/AppContent.vue";

import ElMenu from "./components/ElMenu/index.vue";

export default {

  components: {

    AppContent,

    ElMenu,

  },

};

</script>

<style lang="less" scoped>

...和上面一样，这里省略

</style>

此时打开页面可以看到左侧菜单

递归菜单组件

目前我们看到的只是一个写死的菜单，我们想要的是根据 router 文件自动生成对应的菜单，那么应该怎么做呢？

首先左侧菜单的每一项都可以当做一个组件，然后获取到 router 中的所有菜单，循环展示每一项菜单即可，那么就开始做吧！

新建 src\layouts\components\ElMenu\MenuItem.vue 组件，用来展示每一项的菜单名称

修改 src\layouts\components\ElMenu\index.vue 页面，引入 router.js 获取定义的路由数据，并且引入 MenuItem 组件去循环展示每一项菜单

<template>

  <div>

    <el-menu

      :default-active="$route.path"

      class="el-menu-vertical-demo"

      background-color="#545c64"

      text-color="#fff"

      active-text-color="#ffd04b"

    >

      <MenuItem

        v-for="(route, index) in routersList"

        :key="index"

        :item="route"

        :fatherPath="route.path"

      ></MenuItem>

    </el-menu>

  </div>

</template>

<script>

import routers from "../../../router";

import MenuItem from "./MenuItem.vue";

export default {

  components: {

    MenuItem,

  },

  data() {

    return {

      routersList: [],

    };

  },

  mounted() {

    // 获取所有定义的一级菜单和多级菜单

    this.routersList = routers.options.routes[0].children;

  }

};

</script>

代码说明：

在el-menu 标签中我们定义了 :default-active="$route.path" ，这个含义表示默认选中当前路由菜单，如果是子级菜单会自动展开并选中，这是因为下面的代码中我们会将每一个页面的 path 作为菜单的 index 。

另外代码中我们遍历 MenuItem 组件时传递了每个菜单的对象 item 和每个菜单的路径 fatherPaht ，现在我们要到 MenuItem 组件去根据这个两个属性做递归展示根菜单和多级菜单结构。来到 MenuItem 组件中，编写如下代码

<template>

  <div>

    <!-- 根菜单 -->

    <router-link tag="span" :to="resolvePath()" v-if="!item.children">

      <el-menu-item :index="resolvePath()">

        <i :class="item.meta.icon"></i>

        <span slot="title">{{ item.meta.title }}</span>

      </el-menu-item>

    </router-link>

    <!-- 可展开菜单 -->

    <el-submenu :index="resolvePath()" v-else>

      <template slot="title">

        <i :class="item.meta.icon"></i>

        <span slot="title">{{ item.meta.title }}</span>

      </template>

      <!-- 这里递归去展示多级菜单 -->

      <menu-item

        v-for="(route, index) in item.children"

        :key="index"

        :item="route"

        :fatherPath="resolvePath(route.path)"

      >

      </menu-item>

    </el-submenu>

  </div>

</template>

<script>

// 引入path用来处理路径

import path from "path";

export default {

  // 做组件递归时必须定义一个name。然后递归时的组件名就是这里的name值

  name: "MenuItem",

  props: {

    // 上一级的路由信息

    item: {

      type: Object,

      default: null,

    },

    // 上一级的路径

    fatherPath: {

      type: String,

      default: "",

    },

  },

  data() {

    return {};

  },

  methods: {

    resolvePath(routePath = "") {

      return path.resolve(this.fatherPath, routePath);

    },

  },

};

</script>

代码说明

在做组件递归时，必须要在递归组件内声明 name 属性，属性值就是当前组件的名称，这样才能实现多级嵌套循环效果。

另外在ElementUI 中的菜单分成两种类型,分别如下

<el-menu-item index="4">

    <i class="el-icon-setting"></i>

    <span slot="title">导航四</span>

</el-menu-item>

这种的表示根菜单

<el-submenu index="1">

    <template slot="title">

        <i class="el-icon-location"></i>

        <span>导航一</span>

    </template>

    <el-menu-item index="4">

        <i class="el-icon-setting"></i>

        <span slot="title">导航四</span>

    </el-menu-item>

</el-submenu>

这种的表示一个可展开的菜单，我们根据路由有没有 children 来判断这个菜单是否有子菜单

在根菜单外层添加了一个 router-link 实现了点击菜单跳转到不同页面

现在我们来查看效果

菜单上出现了一个根菜单和一个二级菜单

添加路由自动完成菜单嵌套

现在我们已经完成了一个二级菜单的展示，那么我们添加一个三级路由会不会自动出现三级菜单呢？

首先新建一个测试页面，在文件夹 item2 下面新建一个 item2-1，并且在里面添加一个 index.vue 文件，如下图:

然后去 src\router\index.js 添加这个页面的路由

添加完成后可以发现产品管理菜单自动变成了一个可展开的菜单，展开后里面有一个类别列表菜单

添加头部面包屑

基础用法

我们想要在头部添加一个如下的效果,可以很清晰的知道当前浏览的是哪个页面

在layouts 文件夹添加 HeaderNav 组件，组件地址： src\layouts\components\HeaderNav.vue，添加如下初始代码

<template>

  <div>

    <el-breadcrumb separator="/">

      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>

      <el-breadcrumb-item>活动列表</el-breadcrumb-item>

      <el-breadcrumb-item>活动详情</el-breadcrumb-item>

    </el-breadcrumb>

  </div>

</template>

然后再 src\layouts\index.vue 文件中引入 HeaderNav 组件

<template>

  <div>

    <template>

      <!-- 左侧菜单 -->

      <ElMenu class="left-menu-main" />

      <!-- 右侧操作区域 -->

      <div class="right-view-main">

        <!-- 头部面包屑 -->

        <HeaderNav class="header" />

        <!-- 内容展示区 -->

        <AppContent class="content" />

      </div>

    </template>

  </div>

</template>

<script>

import AppContent from "./components/AppContent.vue";

import ElMenu from "./components/ElMenu/index.vue";

import HeaderNav from "./components/HeaderNav.vue";

export default {

  components: {

    AppContent,

    ElMenu,

    HeaderNav,

  }

};

</script>

<style lang="less" scoped>

样式省略。。。

</style>

此时我们的页面效果是这样的

是不是有点感觉了呢

接下只需要监听页面的变化去实时获取最新的路由信息即可，然后循环遍历显示

实现代码：

<template>

  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item

        v-for="(route, index) in breadcrumbItems"

        :key="index"

      >

        <i :class="route.icon"></i>

        <span>{{ route.title }}</span>

      </el-breadcrumb-item>

    </el-breadcrumb>

  </div>

</template>

<script>

export default {

  data() {

    return {

      breadcrumbItems: [],

    };

  },

  mounted() {

    this.geBreadcrumbItems(this.$route);

  },

  methods: {

    geBreadcrumbItems(route) {

      // 获取当前页面的路由组

      this.breadcrumbItems = route.matched;

      // 从下标为1的位置开始获取路由，去除了最外层定义的根路由信息，并且获取到的数组里面只有meta数据，方便我们取值

      this.breadcrumbItems = this.breadcrumbItems

        .map((item) => item.meta)

        .splice(1);

    },

  },

  watch: {

    $route: function (newVal) {

      this.geBreadcrumbItems(newVal);

    },

  },

};

</script>

效果展示

添加首页快速入口

我们已经实现了基本效果，但是我们还想在面包屑的首位添加首页的连接，点击首页文字快速跳转到到首页

修改 src\layouts\components\HeaderNav.vue 代码为如下

<template>

  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item

        v-for="(route, index) in breadcrumbItems"

        :key="index"

      >

        <!-- 判断面包屑是否有path属性，如果有则显示router-link标签 -->

        <router-link v-if="route.path" :to="route.path">

          <i :class="route.icon"></i>

          <span>{{ route.title }}</span>

        </router-link>

        <!-- 如果没有path属性则不跳转 -->

        <template v-else>

          <i :class="route.icon"></i>

          <span>{{ route.title }}</span>

        </template>

      </el-breadcrumb-item>

    </el-breadcrumb>

  </div>

</template>

<script>

export default {

  data() {

    return {

      breadcrumbItems: [],

    };

  },

  mounted() {

    this.geBreadcrumbItems(this.$route);

  },

  methods: {

    geBreadcrumbItems(route) {

      // 获取当前页面的路由组

      this.breadcrumbItems = route.matched;

      // 从下标为1的位置开始获取路由，去除了最外层定义的根路由信息，并且获取到的数组里面只有meta数据，方便我们取值

      this.breadcrumbItems = this.breadcrumbItems

        .map((item) => item.meta)

        .splice(1);

      // 判断当前页面是否已经是首页

      let nowPath = route.path;

      // 如果当前页面不是首页，则在面包屑的首位置添加一个首页链接

      if (nowPath !== "/home") {

        this.breadcrumbItems.unshift({

          title: "首页",

          icon: "el-icon-s-home",

          path: "/home",

        });

      }

    },

  },

  watch: {

    $route: function (newVal) {

      this.geBreadcrumbItems(newVal);

    },

  },

};

</script>

修改之后页面效果是当我们进入非首页页面时，面包屑前面会有一个首页的快速入口，当进入首页时不会展示首页连接

个性化菜单配置

配置独立页面

现在我们看到的页面都嵌套在左侧菜单和面包屑下面，但是有些页面时不能在这个嵌套页面的，例如登录页面。那么我们怎么通过配置路由来实现这样的效果呢？

首先添加登录页面，新建 src\views\login\index.vue，编写如下代码

<template>

    <div>

        登录页面

    </div>

</template>

添加完登录页面后前往 src\router\index.js 文件添加路由信息，如下图

我们在登录页面的路由信息中的增加一个 oneself:true 的标识，用来标识这个页面时独自打开的，不需要嵌套在菜单下

添加完路由后找到 src\layouts\index.vue 页面修改为如下代码

<template>

  <div>

    <!-- 如果不是独自页面则让页面嵌套在菜单下 -->

    <template v-if="!isOneself">

      <!-- 左侧菜单 -->

      <ElMenu class="left-menu-main" />

      <!-- 右侧操作区域 -->

      <div class="right-view-main">

        <!-- 头部面包屑 -->

        <HeaderNav class="header" />

        <!-- 内容展示区 -->

        <AppContent class="content" />

      </div>

    </template>

    <!-- 如果是独自打开页面，则只展示纯页面 -->

    <div v-else>

      <AppContent />

    </div>

  </div>

</template>

<script>

import AppContent from "./components/AppContent.vue";

import ElMenu from "./components/ElMenu/index.vue";

import HeaderNav from "./components/HeaderNav.vue";

export default {

  components: {

    AppContent,

    ElMenu,

    HeaderNav,

  },

  data() {

    return {

      isOneself: false,

    };

  },

  mounted() {

    // 获取当前路由是否是独自打开的

    this.isOneself = this.$route.meta.oneself;

  },

  watch: {

    // 监听路由变化，实时获取路由信息

    $route: function (newVal) {

      this.isOneself = newVal.meta.oneself;

    },

  },

};

</script>

<style lang="less" scoped>

css省略。。。

</style>

修改完成后查看页面效果

效果很明显，点击了登录后左侧的菜单和面包屑都没有了，浏览器只会展示登录页面信息。

到这里我们会发现登录页面作为了一个菜单项显示到了左侧菜单中，这个问题怎么解决呢？

配置隐藏菜单

找到 src\router\index.js 文件，为登录页面添加一个 hide:true ，如下图，这个属性用来表示这个页面不在左侧菜单中显示

添加完成后找到 src\layouts\components\ElMenu\MenuItem.vue 文件，在根标签上添加一个 v-if 判断，用来判断当前菜单是否需要被渲染

由于这个功能所添加的代码极少，所以就不贴代码了。修改完之后查看页面

通过动画可以看到登录页面已经不在菜单中展示，修改页面地址也会正常的在新页面中打开。

配置外部连接

现在我们配置的地址只能配置我们项目中的地址，那么我需要点击菜单直接打开百度怎么做呢？

首先添加路由信息如下

此时我们点击菜单并不能正常的打开百度

这是因为我们并没有判断页面的 path 类型。

接下来新建 src\layouts\components\ElMenu\MenuLink.vue，编写如下代码

下面代码的含义是定义了一个动态组件，根据父组件传递过来的路径类型显示不同的组件

<template>

  <component :is="type" v-bind="linkProps(to)">

    <slot />

  </component>

</template>

<script>

export default {

  props: {

    // 接收从父组件传递过来的页面地址

    to: {

      type: String,

      required: true,

    },

  },

  computed: {

    isExternal() {

      return /^(https?:|mailto:|tel:)/.test(this.to);

    },

    type() {

      // 根据路径判断组件类型，如果是外部连接则用a标签

      if (this.isExternal) {

        return "a";

      }

      // 如果不是外部连接则用router-link组件包裹

      return "router-link";

    },

  },

  methods: {

    // 绑定组件属性

    linkProps(to) {

      // 如果是外部连接则设置a标签的href地址为传递过来的地址，并且设置在新标签打开

      if (this.isExternal) {

        return {

          href: to,

          target: "_blank",

          style: {

            "text-decoration": "none",

          },

        };

      }

      // 如果是内部地址则设置router-link的to属性值，以及tag属性值为span

      return {

        to: to,

        tag: "span",

      };

    },

  },

};

</script>

然后找到 src\layouts\components\ElMenu\MenuItem.vue 文件，引入刚刚新建 MenuLink 组件

修改代码如下

<template>

  <!-- 判断当前页面是否显示，如果hide为true，则不渲染该菜单 -->

  <div v-if="!item.meta.hide">

    <!-- 根菜单 -->

    <MenuLink :to="resolvePath()" v-if="!item.children">

      <el-menu-item :index="resolvePath()">

        <i :class="item.meta.icon"></i>

        <span slot="title">{{ item.meta.title }}</span>

      </el-menu-item>

    </MenuLink>

    <!-- 可展开菜单 -->

    <el-submenu :index="resolvePath()" v-else>

      <template slot="title">

        <i :class="item.meta.icon"></i>

        <span slot="title">{{ item.meta.title }}</span>

      </template>

      <!-- 这里递归去展示多级菜单 -->

      <menu-item

        v-for="(route, index) in item.children"

        :key="index"

        :item="route"

        :fatherPath="resolvePath(route.path)"

      >

      </menu-item>

    </el-submenu>

  </div>

</template>

<script>

// 引入path用来处理路径

import path from "path";

import MenuLink from "./MenuLink.vue";

export default {

  // 做组件递归时必须定义一个name。然后递归时的组件名就是这里的name值

  name: "MenuItem",

  components: {

    MenuLink,

  },

  props: {

    // 上一级的路由信息

    item: {

      type: Object,

      default: null,

    },

    // 上一级的路径

    fatherPath: {

      type: String,

      default: "",

    },

  },

  data() {

    return {};

  },

  methods: {

    // 判断路径是否是外部地址

    isExternal(path) {

      return /^(https?:|mailto:|tel:)/.test(path);

    },

    // 解析页面地址

    resolvePath(routePath = "") {

      // 判断当前页面地址是否为外部地址

      if (this.isExternal(routePath)) {

        return routePath;

      }

      // 判断从父组件传递过来的地址是否为外部地址

      if (this.isExternal(this.fatherPath)) {

        return this.fatherPath;

      }

      // 格式化页面地址

      return path.resolve(this.fatherPath, routePath);

    },

  },

};

</script>

图片说明修改点