保存进度！

入门/cli/hello-cli/src/App.vue

@@ -10,28 +10,21 @@
 -->
 <template>
   <div class="content">
-    <h1>学习vuex</h1>
-    <div><App1></App1> <App2></App2></div>
-    <el-button type="warning" @click="onClearCount">清零</el-button>
+    <div class="banner">
+      <h1>学习路由</h1>
+    </div>
+    <div class="container">
+      <div class="nav"></div>
+      <div class="view"></div>
+    </div>
   </div>
-  <hr />
 </template>
 
 <script>
-import App1 from "./components/vuex/App1.vue";
-import App2 from "./components/vuex/App2.vue";
-
 export default {
   name: "App",
-  components: {
-    App1,
-    App2,
-  },
-  methods: {
-    onClearCount() {
-      this.$store.commit("clearCount");
-    },
-  },
+  components: {},
+  methods: {},
 };
 </script>
 
@@ -40,22 +33,7 @@ export default {
   background-color: #f4f5f7;
 }
 .content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 40rem;
-  margin: 0px auto;
-  border-radius: 5px;
-  padding: 50px;
-}
-
-#app div {
-  padding: 15px;
-}
-
-#app div > * + * {
-  margin-left: 1rem;
+  background-color: #fff;
 }
 
 hr {

入门/cli/hello-cli/src/components/AppBanner.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-12-02 22:44:12
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-12-02 22:47:10
+ * @FilePath: \hello-cli\src\components\banner.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <h1><slot>AppBanner</slot></h1>
+</template>
+
+<script>
+export default {
+  name: "AppBanner",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+</style>

入门/cli/hello-cli/src/components/AppNav.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-12-02 22:50:54
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-12-02 22:56:40
+ * @FilePath: \hello-cli\src\components\AppNav.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "AppNav",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+</style>

入门/cli/hello-cli/src/components/vuex/App1.vue

@@ -1,45 +0,0 @@
-<!--
- * @Author: Kane
- * @Date: 2022-11-29 11:36:29
- * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 15:51:01
- * @FilePath: \hello-cli\src\components\vuex\App1.vue
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
--->
-<template>
-  <div class="container">
-    <h1>计数器一：{{ storeCount }}</h1>
-    <el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "App-1",
-  data() {
-    return {
-      count: 0,
-    };
-  },
-  methods: {
-    addCount() {
-      this.$store.commit("increment");
-    },
-  },
-  computed: mapState({
-    storeCount: "count",
-  }),
-};
-</script>
-<style scoped>
-.container {
-  text-align: center;
-  display: inline-block;
-  background-color: #fff;
-  border-radius: 5px;
-}
-</style>

入门/cli/hello-cli/src/components/vuex/App2.vue

@@ -1,49 +0,0 @@
-<!-- eslint-disable no-unused-vars -->
-<!--
- * @Author: Kane
- * @Date: 2022-11-29 13:10:21
- * @LastEditors: Kane
- * @LastEditTime: 2022-11-29 16:07:22
- * @FilePath: \hello-cli\src\components\vuex\App2.vue
- * @Description: 
- * 
- * Copyright (c) ${2022} by Kane, All Rights Reserved. 
--->
-<template>
-  <div class="container">
-    <h1>计数器二：{{ this.$store.getters.countText }}</h1>
-    <el-button type="danger" v-on:click="addCount()">更新计数器</el-button>
-  </div>
-</template>
-
-<script>
-//引入mapState
-//import { mapState } from "vuex";
-
-export default {
-  name: "App-2",
-  data() {
-    return {
-      count: 0,
-    };
-  },
-  methods: {
-    addCount() {
-      this.$store.commit("increment");
-    },
-  },
-  computed: {
-    storeCount() {
-      return this.$store.state.count;
-    },
-  },
-};
-</script>
-<style scoped>
-.container {
-  text-align: center;
-  display: inline-block;
-  background-color: #fff;
-  border-radius: 5px;
-}
-</style>