一步步创建vue-element-admin框架实现004-整体样式布局实现

一步步创建vue-element-admin框架实现004-整体样式布局实现

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

element-admin的布局主要就是layout组件

一、样式文件

直接把vue-admin-template的src\styles下文件全部拷贝使用

• element-ui.scss
• index.scss
• mixin.scss
• sidebar.scss
• transition.scss
• variables.scss

二、创建layout布局需要的组件

layout把store和svg引用去掉了，实现静态设置，后面一步步加

在src下创建文件夹layout

1）新增文件：src\layout\index.vue

文件引用了组件：Navbar, Sidebar, AppMain，下面开始创建需要的组件

<template>
  <div class="app-wrapper">
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div>
        <navbar />
      </div>
      <app-main />
    </div>
  </div>
</template>

<script>

import Navbar from '@/layout/components/Navbar'
import AppMain from '@/layout/components/AppMain'
import Sidebar from '@/layout/components/Sidebar'
    
//如果是用了import { Navbar, Sidebar, AppMain } from './components'
//需要创建src\layout\components\index.js，和vue-admin-template的文件一样

export default {
  name: 'Layout',
  components: { AppMain, Navbar, Sidebar }
}
</script>

<style lang="scss" scoped>
 /*和vue-admin-template的文件一样*/
</style>

2）新增文件：src\layout\components\Navbar.vue

文件引用了组件：Hamburger, 直接拷贝vue-admin-template的：src\components\Hamburger\index.vue文件

<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="img+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              首页
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
import Hamburger from '@/components/Hamburger/index'

export default {
  name: 'Navbar',
  components: {
    Hamburger
  },
  data() {
    return {
      img: logo,
      sidebar: {
        opened: true 
      }
    }
  },
  methods: {
    toggleSideBar() {
      this.sidebar.opened = !this.sidebar.opened
    },
    async logout() {
    }
  }
}
</script>

<style lang="scss" scoped>
   /*和vue-admin-template的样式一样*/
</style>

3）新增文件：src\layout\components\AppMain.vue

直接拷贝vue-admin-template的AppMain.vue文件

4）新增文件：src\layout\components\Sidebar\index.vue

文件引用了组件：SidebarItem, Logo，下面开始创建需要的组件

<template>
  <div :class="{'has-logo':true}">
    <logo :collapse="true" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="false"
        :unique-opened="false"
        :collapse-transition="false"
        :active-text-color="variables.menuActiveText"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        mode="vertical"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import Logo from '@/layout/components/Sidebar/Logo'
import variables from '@/styles/variables.scss'
import SidebarItem from '@/layout/components/Sidebar/SidebarItem'

export default {
  name: 'Sidebar',
  components: { SidebarItem, Logo },
  computed: {
    routes() {
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    variables() {
      return variables
    }
  }
}
</script>

新增文件：src\layout\components\Sidebar\SidebarItem.vue

<template>
  <div v-if="!item.hidden">
    <template
      v-if="hasOneShowingChild(item.children,item)
        && (!onlyOneChild.children||onlyOneChild.noShowingChildren)
        &&!item.alwaysShow"
    >
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <i :class="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" />
          <span>{{ onlyOneChild.meta.title }}</span>
        </el-menu-item>
      </app-link>
    </template>

    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <i :class="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" />
        <span slot="title">{{ onlyOneChild.meta.title }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-submenu>
  </div>
</template>

<script>
import path from 'path'
import { isExternal } from '@/util/validate'
import appLink from '@/layout/components/Sidebar/Link'

export default {
  name: 'SidebarItem',
  components: { appLink },
  props: {
     /*和vue-admin-template的文件一样*/
  },
  data() {
    // this.onlyOneChild = null
    return {
      onlyOneChild: null
    }
  },
  methods: {
    hasOneShowingChild(children = [], parent) {
       /*和vue-admin-template的文件一样*/
    },
    resolvePath(routePath) {
      /*和vue-admin-template的文件一样*/
    }
  }
}
</script>

新增文件：src\layout\components\Sidebar\Logo.vue

<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <transition name="sidebarLogoFade">
      <router-link key="collapse" class="sidebar-logo-link" to="/">
        <img :src="logo" class="sidebar-logo">
        <h1 class="sidebar-title">{{ title }} </h1>
      </router-link>
    </transition>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'

export default {
  name: 'SidebarLogo',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      title: 'My Vue Admin Template',
      logo: logo
    }
  }
}
</script>

<style lang="scss" scoped>
   /*和vue-admin-template的文件一样*/
</style>

新增文件：src\layout\components\Sidebar\Link.vue

直接拷贝vue-admin-template的Link.vue文件

直接拷贝vue-admin-template的src\util\validate.js文件

三、引用布局layout

1）在src\router\index.js路由上配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
/* Layout */
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'el-icon-s-home' }
    }]
  },

  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'el-icon-menu'
    },
    children: [
      /*和vue-admin-template的文件一样*/
    ]
  }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()
export default router

2）main.js配置使用，引入全局样式

import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/styles/index.scss' // global css

3）App.vue改成路由组件

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>