使用

下面介绍的是webpack环境下如何引入el-admin-layout，更多例子 (opens new window)

你需要先了解vue、vue-router的使用，vue文档 (opens new window) 、vue-router文档 (opens new window)

如何按umd包的形式引入

umd方式下，el-admin-layout的命名空间是ElAdminLayout，浏览器环境中会自动挂在window下，并且在window.Vue存在时会自动注册<el-admin-layout>组件

另外，如果需要手动注册<el-admin-layout>的话，使用ElAdminLayout.Layout来得到layout组件，除此之外和webpack环境没啥区别

引入依赖

import Vue from 'vue'
import VueRouter from 'vue-router'
import Element from 'element-ui'

Vue.use(VueRouter).use(Element)

引入样式

确保el-admin-layout的样式在element-ui的样式后面（cdn引入element-ui的也要注意style标签的顺序）：

//引入element-ui的scss时需要覆盖字体路径
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index.scss";
@import "~el-admin-layout/src/style/index.scss";

引入css

import from 'el-admin-layout/dist/index.css'

这个css是包含了maxViewHeight的完整版（会多1KB），如果不需要的话可以clone仓库后修改build/css.js中的配置来自行打包css文件

创建一个Layout组件

<template>
    <el-admin-layout/>
</template>

import ElAdminLayout, {appMutations} from 'el-admin-layout'

/*在el-admin-layout渲染前设置一些数据（放在mounted里当然也行，只不过会导致多渲染一次）*/

//设置logo和标题
appMutations.title('测试')
appMutations.logo('./logo.png')

//设置菜单
appMutations.menus([...])

/*当然上面这些东西可以在任何地方设置，这是响应式的*/

export default {
    name: "Layout",

    components: {ElAdminLayout}
}

注意

<el-admin-layout/>的父容器需要设置高度，不然样式会出问题：

<div style="height: 100vh">
    <layout/>
</div>

引入自带路由

使用injectDefaultRoute来引入el-admin-layout自带的路由：

import Vue from 'vue'
import Router from 'vue-router'
import {injectDefaultRoute} from 'el-admin-layout'
import Layout from "./layout" //这是上一步创建的Layout组件

const router = new Router({
    routes: [
        ...injectDefaultRoute(Layout),
        {
            path: '/',
            component: Layout,
            children: [
                {
                    path: 'index',
                    component: Index
                }
            ]
        },
        {
            path: '*',
            component: 404
        }
    ]
})

export default router

注意

请确保自带路由在404路由前被引入！建议就像上面写的一样，放到第一位

如果担心路由冲突，可以打印injectDefaultRoute的返回值看看引入了哪些路由