diff --git a/20_脚手架/vue_code/22.插槽/1.src_默认插槽/App.vue b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/App.vue
new file mode 100644
index 0000000..035934c
--- /dev/null
+++ b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/App.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="container">
+    <Category title="美食">
+      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
+    </Category>
+    <Category title="游戏">
+      <ul>
+        <li v-for="(value, index) in games" :key="index">{{ value }}</li>
+      </ul>
+    </Category>
+    <Category title="电影">
+      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
+    </Category>
+  </div>
+</template>
+
+<script>
+import Category from "@/components/Category.vue";
+
+export default {
+  name: "App",
+  components: {Category},
+  data() {
+    return {
+      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
+      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
+      films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》']
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  display: flex;
+  justify-content: space-around;
+}
+</style>
diff --git a/20_脚手架/vue_code/22.插槽/1.src_默认插槽/assets/logo.png b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/assets/logo.png differ
diff --git a/20_脚手架/vue_code/22.插槽/1.src_默认插槽/components/Category.vue b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/components/Category.vue
new file mode 100644
index 0000000..3f524ac
--- /dev/null
+++ b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/components/Category.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="category">
+    <h3>{{ title }}分类</h3>
+    <slot>slot默认值</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Category",
+  // props: ['title', 'listData']
+}
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    width: 200px;
+    height: 300px;
+  }
+  h3 {
+    text-align: center;
+    background-color: orange;
+  }
+  img {
+    width: 100%
+  }
+  video {
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/22.插槽/1.src_默认插槽/main.js b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/main.js
new file mode 100644
index 0000000..967576e
--- /dev/null
+++ b/20_脚手架/vue_code/22.插槽/1.src_默认插槽/main.js
@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入插件
+import vueResource from "vue-resource";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(vueResource)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')
diff --git a/20_脚手架/vue_code/public/index.html b/20_脚手架/vue_code/public/index.html
index 9595ac5..e95a5c8 100644
--- a/20_脚手架/vue_code/public/index.html
+++ b/20_脚手架/vue_code/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
+<!--    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">-->
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index 3a938a4..035934c 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,20 +1,38 @@
 <template>
   <div class="container">
-    <Search/>
-    <List/>
+    <Category title="美食">
+      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
+    </Category>
+    <Category title="游戏">
+      <ul>
+        <li v-for="(value, index) in games" :key="index">{{ value }}</li>
+      </ul>
+    </Category>
+    <Category title="电影">
+      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
+    </Category>
   </div>
 </template>
 
 <script>
-import Search from "@/components/Search.vue";
-import List from "@/components/List.vue"
+import Category from "@/components/Category.vue";
 
 export default {
   name: "App",
-  components: {Search, List}
+  components: {Category},
+  data() {
+    return {
+      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
+      games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
+      films: ['《教父》', '《拆弹专家》', '《你好李焕英》', '《哈哈》']
+    }
+  }
 }
 </script>
 
 <style>
-
+.container {
+  display: flex;
+  justify-content: space-around;
+}
 </style>
diff --git a/20_脚手架/vue_code/src/components/Category.vue b/20_脚手架/vue_code/src/components/Category.vue
new file mode 100644
index 0000000..3f524ac
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/Category.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="category">
+    <h3>{{ title }}分类</h3>
+    <slot>slot默认值</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Category",
+  // props: ['title', 'listData']
+}
+</script>
+
+<style scoped>
+  .category {
+    background-color: skyblue;
+    width: 200px;
+    height: 300px;
+  }
+  h3 {
+    text-align: center;
+    background-color: orange;
+  }
+  img {
+    width: 100%
+  }
+  video {
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/List.vue b/20_脚手架/vue_code/src/components/List.vue
deleted file mode 100644
index 3fcf878..0000000
--- a/20_脚手架/vue_code/src/components/List.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="row">
-    <!--  展示列表  -->
-    <div v-show="info.user.length" class="card" v-for="u in info.user">
-      <a :href="u.html_url" target="_blank">
-        <img :src="u.avatar_url" style="width: 100px" alt=""/>
-      </a>
-      <p class="card-text">{{ u.login }}</p>
-    </div>
-    <!--  展示欢迎  -->
-    <h1 v-show="info.isFirst">欢迎</h1>
-    <!--  展示加载中  -->
-    <h1 v-show="info.isLoading">数据加载中...</h1>
-    <!--  展示错误信息  -->
-    <h1 v-show="info.errorMsg">{{ info.errorMsg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "List",
-  data() {
-    return {
-      info: {
-        user: [],
-        isFirst: true,
-        isLoading: false,
-        errorMsg: ''
-      }
-    }
-  },
-  methods: {
-    getUserList(data) {
-      this.info = {...this.info, ...data}
-    }
-  },
-  mounted() {
-    this.$bus.$on('getUserList', this.getUserList)
-  }
-}
-
-</script>
-
-<style scoped>
-.album {
-  min-height: 50rem; /* Can be removed; just added for demo purposes */
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  background-color: #f7f7f7;
-}
-
-.card {
-  float: left;
-  width: 33.333%;
-  padding: .75rem;
-  margin-bottom: 2rem;
-  border: 1px solid #efefef;
-  text-align: center;
-  border-radius: 10px;
-}
-
-.card > img {
-  margin-bottom: .75rem;
-  border-radius: 100px;
-}
-
-.card-text {
-  font-size: 85%;
-}
-</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/Search.vue b/20_脚手架/vue_code/src/components/Search.vue
deleted file mode 100644
index 52d2905..0000000
--- a/20_脚手架/vue_code/src/components/Search.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div>
-    <section class="jumbotron">
-      <h3 class="jumbotron-heading">Search Github Users</h3>
-      <div>
-        <input type="text" placeholder="enter the name you search" v-model="input">&nbsp;<button @click="getUser()">
-        Search
-      </button>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script>
-// import axios from "axios";
-
-export default {
-  name: "Search",
-  data() {
-    return {
-      input: ""
-    }
-  },
-  methods: {
-    getUser() {
-      this.$bus.$emit('getUserList', {'isFirst':false, 'isLoading': true})
-      this.$http.get('https://api.github.com/search/users?', {params: {"q": this.input}}).then(
-          response => {
-            this.$bus.$emit('getUserList', {'isLoading': false, 'user': response.data.items})
-          },
-          error => {
-            this.$bus.$emit('getUserList', {'errorMsg': error.message, 'user': []})
-          }
-      )
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
