一步步创建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，下面开始创建需要的组件

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

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

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

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

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

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

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

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

新增文件：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改成路由组件