vue2+element基础架子2.0

 前言

 大家好 今天对vue2+element ui架子做一个讲解

 目录结构

 路由部分

  index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from "@/views/layout/index.vue"
import Login from "@/views/login/login.vue"
import Home from "@/views/home/Home.vue"
const Product=()=>import('@/views/product/index.vue')
const List=()=>import('@/views/product/list/index.vue')
const Category=()=>import('@/views/product/category/index.vue')




const Order=()=>import('@/views/order/index.vue')
const OrderList=()=>import('@/views/order/list/index.vue')
const OrderCollect=()=>import('@/views/order/collect/index.vue')




const Advent=()=>import('@/views/advent/index.vue')
const AdventList=()=>import('@/views/advent/list/index.vue')
Vue.use(VueRouter)




const routes = [
  {
    path: '/',
    name: 'layout',
    component: Layout,
    children: [{
      path: '/',
      name: 'home',
      component: Home,
    },{
      path: '/product',
      name: 'home',
      component: Product,
      children:[{
        path: 'list',
        name: 'list',
        component: List,
      },{
        path: 'category',
        name: 'category',
        component: Category,
      }]
    },{
      path: '/order',
      name: 'order',
      component: Order,
      children:[{
        path: 'orderlist',
        name: 'orderlist',
        component: OrderList,
      },{
        path: 'collect',
        name: 'collect',
        component: OrderCollect,
      }]
    },{
      path: '/advent',
      name: 'advent',
      component: Advent,
      children:[{
        path: 'adventlist',
        name: 'adventlist',
        component: AdventList,
      }]
    }]
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})




export default router

 layout部分

<template>
  <div class="layout">
    <div class="menu">
        <Menu :isCollapse="isCollapse"></Menu>
    </div>
     <div class="content" :class="{small:isCollapse}">
       <Content @changeShow="changeShow" :isCollapse="isCollapse"></Content>
    </div>
  </div>
</template>
<script>
import Menu from "./menu/index.vue";
import Content from "./content/index.vue";




export default {
  name: "Layout",
  components: {
    Menu,
    Content,
  },
  data() {
    return {
        isCollapse:false
    };
  },
  mounted() {},
  methods: {
    changeShow(){
        console.log(2222)
        this.isCollapse=!this.isCollapse
    }
  },
};
</script>
<style lang="less" scoped>
    .layout{
        .menu{
            // width: 200px;
            background: #888;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
        }
        .content{
            padding-left: 200px;
        }
        .small{
            padding-left: 64px;
        }
    }
</style>

 menu

<template>
  <div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#112f50"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      :collapse="isCollapse"
    >
      <el-menu-item>
        <span slot="title">歌谣采购管理系统</span>
      </el-menu-item>
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="/product">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">产品管理</span>
        </template>
        <el-menu-group>
          <el-menu-item index="/product/list">
            <i class="el-icon-setting"></i>
            <span slot="title">产品列表</span>
          </el-menu-item>
          <el-menu-item index="/product/category">
            <i class="el-icon-setting"></i>
            <span slot="title">产品分类</span>
          </el-menu-item>
        </el-menu-group>
      </el-submenu>
      <el-submenu index="/order">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-group>
          <el-menu-item index="/order/orderlist">
            <i class="el-icon-setting"></i>
            <span slot="title">订单列表</span>
          </el-menu-item>
          <el-menu-item index="/order/collect">
            <i class="el-icon-setting"></i>
            <span slot="title">订单汇总</span>
          </el-menu-item>
        </el-menu-group>
      </el-submenu>
      <el-submenu index="/advent">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">广告管理</span>
        </template>
        <el-menu-group>
          <el-menu-item index="/advent/adventlist">
            <i class="el-icon-setting"></i>
            <span slot="title">广告列表</span>
          </el-menu-item>
        </el-menu-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "Menu",
  props: ["isCollapse"],
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.el-menu {
  border-right: 0;
  /deep/ .is-active {
    background-color: pink !important;
    color: #fff !important;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

 菜单页面

<template>
    <div>
        列表
    </div>
</template>




<script>
export default {
    name: 'ProductList',




    data() {
        return {
            
        };
    },




    mounted() {
        
    },




    methods: {
        
    },
};
</script>




<style lang="scss" scoped>
</style>

 运行结果

github地址

https://github.com/geyaoisnice/GeyaoV2BuySystem

点击上方蓝字关注我们

下方查看历史文章

springboot+mybatis+vue3实现前后端管理系统

springboot+mybatis+vue3实现前后端管理系统

MongoDB之node操作实现数据库增删改查

vue2-element组件封装el-button-groups