iView系列之布局篇(二)

• 1.Layout各组件讲解及源码分析
• 2.常见的布局模式分析
• 3.实战：利用Layout及其他组件，完成后台框架搭建

<Layout> 布局容器：包括<Header>顶部，<Sider>侧边栏，<Content>主体内容，<Footer>底部，<Layout>

3.实战：利用<Layout>组件，完成后台框架搭建

利用Vue CLI 3初始化一个空白的项目。 里面只安装了vue-router 和 iView。

src/plugins/iview.js:

import Vue from 'vue'
import iView from 'iview'

Vue.use(iView)

import 'iview/dist/styles/iview.css'

在src/views/目录下，新建4个组件。

• App.vue
• Dev.vue
• Manage.vue
• Push.vue

在router.js里面配置路由。

export default new Router({
    routes: [
        {
            path: '/app',
            component: () => import('./views/App.vue')
        },
        {
            path: '/push',
            component: () => import('./views/Push.vue')
        },
        {
            path: '/dev',
            component: () => import('./views/Dev.vue')
        },
        {
            path: '/manage',
            component: () => import('./views/Manage.vue')
        }
    ]
})