后面會補充github地址

---

案例說明

徒手搭建后臺管理系統模板（2.0）

之前網上找了以下模板，大多太重，我想要一款超輕量級，此處量級是指，代碼結構，目錄結構，簡單。

---

因果：需要在大屏系統中假如后臺管理系統，大屏用的是2.0

1.引入庫

代碼如下（示例）：

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

2.創建布局組件

代碼如下（layout/index）：

<div class="admin-wrapper"><div class="sidebar-container"><!--左側菜單--></div><div class="main-container"><div class="header-main"><!--頂部菜單--></div><!--內容區域--></div>
</div>

3.創建布局組件

代碼如下（layout/components/menuBar）：

<el-scrollbar wrap-class="scrollbar-wrapper"><el-menu><!--菜單組件menu-item--><menu-item v-for="(router, key) in menulist" :key="key" :item="router"/></el-menu>
</el-scrollbar>

模擬菜單數據 menuList: mockMenuData

const mockMenuData = [{ id: '1', level: 1, name: '菜單A', parentId: '0', path: '' },{ id: '2', level: 1, name: '菜單B', parentId: 0, path: '/yjcd',children: [{ id: '2_1', level: 2, name: '菜單B_A', parentId: '1', path: '' },{ id: '2_2', level: 2, name: '菜單B_B', parentId: '1', path: '' },{ id: '2_3', level: 2, name: '菜單B_C', parentId: '1', path: '',children: [{ id: '2_1_1', level: 2, name: '菜單B_C_A', parentId: '2', path: '' },{ id: '2_1_1', level: 2, name: '菜單B_C_B', parentId: '2', path: '' },{ id: '2_1_1', level: 2, name: '菜單B_C_C', parentId: '2', path: '' }]}]}
]

菜單組件遞歸子組件 menu-item

<div class="menu-item"><el-submenu v-if="item.children" :index="item.path" popper-append-to-body><template slot="title"><span slot="title" v-text="item.name"></span></template><menu-item v-for="(item_, key_) in item.children" :key="key_" :item="item_"/></el-submenu><template v-else><el-menu-item :index="item.path" :id="item.path"><span slot="title" v-text="item.name"></span></el-menu-item></template>
</div>

---

?4.菜單效果展示

5.創建頂部組件

代碼如下（layout/components/navBar）：

<div class="nav-bar"><!--開合按鈕--><div class="toggle-switch"><div class="icon" @click="handleToggleSwitch" v-if="show"><i class="el-icon-s-fold"></i></div><div class="icon" @click="handleToggleSwitch" v-else><i class="el-icon-s-unfold"></i></div></div><!--面包屑--><breadcrumb/><!--菜單--><div class="right-box"><el-dropdown class="avatar-container" trigger="click"><div class="avatar-wrapper"><img src="" class="user-avatar"></div><el-dropdown-menu slot="dropdown"><el-dropdown-item divided @click.native="handleLogout"><span style="display:block;">退出登錄</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</div>

5.創建頂部面包屑組件

代碼如下（layout/components/breadcrumb）：

  <el-breadcrumb class="app-breadcrumb" separator="/"><transition-group name="breadcrumb"><el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"><span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span><a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a></el-breadcrumb-item></transition-group></el-breadcrumb>const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

6.創建內容區域組件

代碼如下（layout/components/appMain）：

<section class="app-main"><transition name="fade-transform" mode="out-in"><router-view /></transition>
</section>

7.效果總覽

7.布丁（實現一些小細節）

項目要求，切換時候有loading

嘿嘿，咱之前做移動端時候又類似代碼，代碼如下：（記得import Loading 哈）

export const el_import = (viewPath) => {return resolve => {const el_ld = Loading.service({text: '加載中···'})require(['@/views/' + viewPath], component => {el_ld.close()resolve(component)})}
}

使用方法：

{
? ? path: '/test',
? ? name: 'test',
? ? meta: { title: 'test', index: 0, keepAlive: false, requireAuth: false },
? ? component: el_import('admin/index')
}

好了，本期內容就到這里結束吧。