chore:push

.eslintrc.js

@@ -15,5 +15,6 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-unused-vars': "off",
     'no-undef': 'off',
+    'vue/no-unused-components': 'off'
   }
 }

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
+    <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    </div> -->
+    <router-view />
   </div>
 </template>
 

src/Layout/Aside.vue

+<template>
+    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+      <el-menu :default-openeds="['1', '3']">
+        <el-submenu index="1">
+          <template slot="title"
+            ><i class="el-icon-message"></i>导航一</template
+          >
+          <el-menu-item-group>
+            <template slot="title">分组一</template>
+            <el-menu-item index="1-1">选项1</el-menu-item>
+            <el-menu-item index="1-2">选项2</el-menu-item>
+          </el-menu-item-group>
+          <el-menu-item-group title="分组2">
+            <el-menu-item index="1-3">选项3</el-menu-item>
+          </el-menu-item-group>
+          <el-submenu index="1-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-submenu index="2">
+          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+          <el-menu-item-group>
+            <template slot="title">分组一</template>
+            <el-menu-item index="2-1">选项1</el-menu-item>
+            <el-menu-item index="2-2">选项2</el-menu-item>
+          </el-menu-item-group>
+          <el-menu-item-group title="分组2">
+            <el-menu-item index="2-3">选项3</el-menu-item>
+          </el-menu-item-group>
+          <el-submenu index="2-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-submenu index="3">
+          <template slot="title"
+            ><i class="el-icon-setting"></i>导航三</template
+          >
+          <el-menu-item-group>
+            <template slot="title">分组一</template>
+            <el-menu-item index="3-1">选项1</el-menu-item>
+            <el-menu-item index="3-2">选项2</el-menu-item>
+          </el-menu-item-group>
+          <el-menu-item-group title="分组2">
+            <el-menu-item index="3-3">选项3</el-menu-item>
+          </el-menu-item-group>
+          <el-submenu index="3-4">
+            <template slot="title">选项4</template>
+            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+      </el-menu>
+    </el-aside>
+</template>
+
+<script>
+import { mapActions, mapState } from "vuex"; //注册 action 和 state
+export default {
+  name: "Aside",
+  data: function () {
+    return {
+      message: "Hello Vue.js!",
+    };
+  },
+  computed: {
+    //在这里映射 store.state.count，使用方法和 computed 里的其他属性一样
+    ...mapState(["count"]),
+  },
+  components: {
+  },
+  mounted() {
+  },
+  methods: {
+    //在这里引入 action 里的方法，使用方法和 methods 里的其他方法一样
+    ...mapActions(["increment"]),
+  },
+};
+</script>
\ No newline at end of file

src/Layout/Header.vue

+<template>
+    <el-header style="text-align: right; font-size: 12px">
+        <el-dropdown>
+          <i class="el-icon-setting" style="margin-right: 15px"></i>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>查看</el-dropdown-item>
+            <el-dropdown-item>新增</el-dropdown-item>
+            <el-dropdown-item>删除</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <span>王小虎</span>
+    </el-header>
+</template>
+
+<script>
+import { mapActions, mapState } from "vuex"; //注册 action 和 state
+export default {
+  name: "Header",
+  data: function () {
+    return {
+      message: "Hello Vue.js!",
+    };
+  },
+  computed: {
+    //在这里映射 store.state.count，使用方法和 computed 里的其他属性一样
+    ...mapState(["count"]),
+  },
+  components: {
+  },
+  mounted() {
+  },
+  methods: {
+    //在这里引入 action 里的方法，使用方法和 methods 里的其他方法一样
+    ...mapActions(["increment"]),
+  },
+};
+</script>
\ No newline at end of file

src/Layout/Layout.vue

+<template>
+  <el-container style="height: 500px; border: 1px solid #eee">
+    <Aside />
+    <el-container>
+      <Header />
+      <el-main>
+         <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<style>
+.el-header {
+  background-color: #b3c0d1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+</style>
+
+<script>
+import Aside from "./Aside";
+import Header from "./Header";
+import { mapActions, mapState } from "vuex"; //注册 action 和 state
+export default {
+  name: "Layout",
+  data: function () {
+    return {
+      message: "Hello Vue.js!",
+    };
+  },
+  computed: {
+    //在这里映射 store.state.count，使用方法和 computed 里的其他属性一样
+    ...mapState(["count"]),
+  },
+  components: {
+    Aside,
+    Header,
+  },
+  mounted() {},
+  methods: {
+    //在这里引入 action 里的方法，使用方法和 methods 里的其他方法一样
+    ...mapActions(["increment"]),
+  },
+};
+</script>
\ No newline at end of file

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import Layout from '@/Layout/Layout.vue'
 import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: '/user',
+    name: 'Layout',
+    component: Layout,
+    children: [
+      {
+        path: '/index',
+        name: 'Home',
+        component: Home,
+      }
+    ]
   },
   {
     path: '/about',