搭建element-Vue2后台管理项目

 从0开始快速搭建一个后台管理系统，搭建好之后就是下面这种形式

安装node环境：下载地址：Node.js

安装脚手架：npm install -g @vue/cli 

创建vue项目：vue create +项目名

进入项目：cd+项目名

安装vue-router：npm install vue-router --save

安装路由出现报错指定一个路由的版本去安装： npm install vue-router@3.5.3 --save

在main.js文件中配置路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.use(router)
new Vue({
    el: '#app',
    render: h => h(App),
    router,
}).$mount('#app')

app.vue里引入router-view进行路由管理

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
}
</script>
<style>
</style>

新建的vue页面

在src文件夹下面建一个router文件夹，在router文件夹下面建一个index.js文件引入路由内容如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '../components/layout'
export default new Router({
    routes: [{
            path: "/",
            name: "login",
            component: () =>
                import('../common/login.vue'),
            meta: {
                title: "登录",
            }

        },
        {
            path: '/vueLayout',
            name: 'vueLayout',
            redirect: '/home',
            component: Layout,
            children: [{
                    path: "/home",
                    name: "home",
                    component: () =>
                        import('../pages/home/index.vue'),
                    meta: {
                        title: "首页",
                    }
                },
                {
                    path: "/SecKill/SecKill",
                    name: "SecKill",
                    component: () =>
                        import('../pages/SecKill/index.vue'),
                    meta: {
                        title: "页面一/2"
                    },
                },
                {
                    path: "/SecKill/DingDan",
                    name: "DingDan",
                    component: () =>
                        import('../pages/SecKill/dingdan.vue'),
                    meta: {
                        title: "页面一/1"
                    },
                },
                {
                    path: "/Ranking",
                    name: "Ranking",
                    component: () =>
                        import('../pages/ranking/index.vue'),
                    meta: {
                        title: "页面一"
                    },
                },
            ]
        },
    ]
})
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}

安装element：推荐使用 npm 的方式安装 npm i element-ui -S

全局引入element：在 main.js 中写入以下内容

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);

new Vue({
  el: '#app',
  render: h => h(App)
});

 在src下面新建一个components文件夹，components文件夹下新建一个layout文件夹里面放一个index.vue文件，在这个文件里引入element的布局容器进行调整

layout文件夹下面的index.vue文件代码如下

<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside :width="isCollapse ?'64px':'250px'">
        <el-menu :collapse="isCollapse" :collapse-transition="false" background-color="#000f16" unique-opened style="min-height: 100vh;" router :default-active="$router.currentRoute.path" @select="changeSidebar" text-color="#fff" active-text-color="#fff">
          <div class="menuLeft">
            <div class="menu-nav-header">
              <el-image style="width: 22px; height: 22px; border-radius: 2px" :src="logo"></el-image>
              <span style="margin-left: 10px">管理控制台</span>
            </div>
          </div>
          <template v-for="item in menuslist">
            <template v-if="item.childMenus && item.childMenus.length > 0">
              <el-submenu :index="item.url + ''" :key="item.url">
                <template slot="title">
                  <div>
                    <div class="icon-box">
                      <i :class="item.icon" style="font-size: 14px"></i>
                    </div>
                    <span slot="title">{{ item.name }}</span>
                  </div>
                </template>
                <template v-for="subItem in item.childMenus">
                  <el-submenu v-if="subItem.childMenus && subItem.childMenus.length > 0" :index="subItem.url + ''">
                    <template slot="title">
                      <div class="menu-item">
                        <div class="icon-box">
                          <i :class="subItem.icon"></i>
                        </div>
                        <span slot="title">{{ subItem.name }}</span>
                      </div>
                    </template>
                    <el-menu-item v-for="(threeItem, i) in subItem.childMenus" :key="i" :index="threeItem.url + ''">
                      <div class="menu-item">
                        <div class="icon-box">
                          <i :class="threeItem.icon"></i>
                        </div>
                        <span>{{ threeItem.name }}</span>
                      </div>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item v-else :index="subItem.url + ''" :key="subItem.url">
                    <div class="menu-item">
                      <div class="icon-box">
                        <i :class="subItem.icon"></i>
                      </div>
                      <span slot="title">{{ subItem.name }}</span>
                    </div>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.url + ''" :key="item.url">
                <div>
                  <div class="icon-box">
                    <i :class="item.icon"></i>
                  </div>
                  <span slot="title">{{ item.name }}</span>
                </div>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div style=" display: flex;align-items: center;">
            <i class="el-icon-s-grid" style="margin-right: 16px" @click="toggleCollapse"></i>
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="name in breadList" :key="name">
                {{ name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <span>Admin</span>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Router from "vue-router";
export default {
  name: "vueLayout",
  components: {

  },
  data() {
    return {
      breadList: [],
      //请求过来的菜单栏，这里写的是假数据
      menuslist: [
        { childMenus: [], icon: "fa fa-dashboard", name: "首页", url: "/home" },
        { childMenus: [], icon: "fa fa-copy", name: "页面一", url: "/Ranking" },
        {          childMenus: [
            { childMenus: [], icon: "fa fa-list-alt", name: "页面一/1", url: "/SecKill/DingDan" },
            { childMenus: [], icon: "fa fa-gear", name: "页面一/2", url: "/SecKill/SecKill" }
          ], icon: "fa fa-th-large", name: "页面二", url: "/SecKill"        }
      ],
      isCollapse: false,
      activeIndex2: '1',
      logo: "https://img2.baidu.com/it/u=582969491,551215389&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1671555600&t=1bafb324f81241dc805691367c029ec1",
    };
  },
  computed: {

  },
  created() {
    setTimeout(() => {
      this.getBreadcrumb();
    }, 200);
  },
  watch: {
    $route(route) {
      this.getBreadcrumb();
    },
  },
  mounted() { },
  methods: {
    changeSidebar(path) {
      this.$router.push(path);
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
   //遍历面包屑导航
    getBreadcrumb() {
      var ms = [];
      this.menuslist.forEach((m1) => {
        const m11 = {
          parent: [],
          menu: m1,
        };
        ms.push(m11);
        m1.childMenus.forEach((m2) => {
          const m22 = {
            parent: [m1.name],
            menu: m2,
          };
          ms.push(m22);
          m2.childMenus.forEach((m3) => {
            const m33 = {
              parent: [m1.name, m2.name],
              menu: m3,
            };
            ms.push(m33);
          });
        });
      });

      var r = this.$route;
      var nList = [];
      ms.forEach((m) => {
        if (m.menu.url == r.path) {
          var ns = m.parent;
          ns.push(m.menu.name);
          nList = ns;
        }
      });
      this.breadList = nList;
    },
  }
}

</script>
<style scoped>
.el-menu-item .is-active {
  background-color: #008afb !important;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
.el-header {
  font-size: 20px;
  background-color: #ffffff;
  -webkit-transition: -webkit-box-shadow linear 0.05s;
  border-color: rgba(25, 39, 142, 0.5);
  -webkit-box-shadow: 5px 0 5px #c0c0c0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-menu-item.is-active {
  background-color: #008afb !important;
}
.menu-nav-header {
  color: white;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background-color: #000f16;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.icon-box {
  float: left;
  width: 30px;
  text-align: center;
}

.menu-item {
  margin-left: 20px;
}
//修改导航条样式
.el-aside {
  overflow-y: scroll !important;
}
.el-aside::-webkit-scrollbar {
  width: 5px;
}
.el-aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(53, 54, 54, 0.3);
}
</style>

引入菜单栏图标：Font Awesome，一套绝佳的图标字体库和CSS框架

在public文件夹里的index.html中引入

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

配置请求：http://t.csdn.cn/MQgrR