005_首页布局（vue+element）

001_项目目录(h3)

• \src\main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 全局配置
import './assets/scss/reset.scss'
import 'element-ui/lib/theme-chalk/index.css'

// 第三方包
import ElementUI from 'element-ui'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

• \src\app.vue

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

<style lang="scss">
#app {
  height: 100vh;
}
</style>

• \src\views\Student\Main.vue

<template>
  <el-container style="height: 100%">
    <el-aside width="auto"><common-aside></common-aside></el-aside>
    <el-container>
      <el-header><common-header></common-header></el-header>
      <el-main> main </el-main>
    </el-container>
  </el-container>
</template>

<script>
//引入组件
import CommonHeader from '../../components/CommonHeader'
import CommonAside from '../../components/CommonAside'
export default {
  // /注册组件
  components: {
    CommonHeader,
    CommonAside
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #333;
}
.el-aside {
  background-color: rgb(193, 224, 172);
}
.el-main {
  background-color: rgb(33, 109, 223);
}
</style>

• \src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../views/Student/Login.vue'
import Register from '../views/Student/Register.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Main',
    //按需加载
    component: () => import('@/views/Student/Main.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  }
]

const router = new VueRouter({
  routes
})

export default router

• \src\components\CommonAside.vue

<template>
  <div>
    CommonAside
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

• \src\components\CommonHeader.vue

<template>
  <div>
    CommonHeader
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

• 浏览器界面