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

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

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

新建项目

vue create vueadmin

安装 less-loader

安装

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

cnpm i less-loader@6.0.0 -D

使用

引入 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')

使用

配置 VueRouter

npm安装

1. 安装

npm install vue-router

2. 新建 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;

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

3. 修改 main.js

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

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

4. 修改 App.vue

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

• http://localhost:8080/
• http://localhost:8080/about

VueCli安装

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

vue add router

动态生成左侧菜单

添加layout组件

1. 修改路由文件

首先我们要创建好 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 文件夹下的文件结构：

2. 新建src\layouts\index.vue

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

页面结构分成三大部分：

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

对应成代码结构如下

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

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

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

3. 修改 App.vue

只保留 router-view

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

修改页面样式

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

效果展示

引入左侧菜单

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

2. 注册 ElMenu 组件添加到 src\layouts\index.vue 中

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

递归菜单组件

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

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

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

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

代码说明：

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

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

代码说明

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

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

    
    导航四

• 这种的表示根菜单

    
    
        
        导航四
    

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

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

现在我们来查看效果

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

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

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

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

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

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

添加头部面包屑

基础用法

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

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

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

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

是不是有点感觉了呢

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

实现代码：

效果展示

添加首页快速入口

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

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

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

个性化菜单配置

配置独立页面

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

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

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

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

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

修改完成后查看页面效果

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

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

配置隐藏菜单

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

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

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

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

配置外部连接

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

首先添加路由信息如下

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

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

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

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

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

修改代码如下

图片说明修改点

修改完成后查看页面效果

现在可以看到点击百度搜索菜单后在新页签打开了百度。