feat:简单Layout布局

src/App.vue

@@ -1,6 +1,5 @@
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
   <router-view/>
 </template>
 
@@ -11,6 +10,5 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/layout/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-container>
+      <el-aside width="200px">Aside</el-aside>
+      <el-container>
+        <el-main>
+          <router-view/>
+        </el-main>
+        <el-footer>Footer</el-footer>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #d3dce6;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 200px;
+}
+
+.el-main {
+  background-color: #e9eef3;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 160px;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>

src/router/index.ts

@@ -1,17 +1,19 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
-import HelloWord from '../components/HelloWorld.vue'
+import Layout from '@/layout/index.vue'
 
 const routes: Array<RouteRecordRaw> = [
     {
-        path: '',
-        redirect: (_) => {
-            return {path: '/home'}
-        }
-    },
-    {
-        path: '/home',
-        name: 'HelloWord',
-        component: HelloWord
+        path: '/',
+        component: Layout,
+        redirect: '/dashboard',
+        children: [
+            {
+                path: 'dashboard',
+                component: () => import('@views/dashboard/index.vue'),
+                name: 'Dashboard',
+                meta: {title: '首页', icon: 'dashboard', affix: true}
+            }
+        ]
     }
 ]
 

src/views/dashboard/index.vue

@@ -0,0 +1,13 @@
+<template>
+  这里是控制台
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>