diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index 5d32cc5..6d2b372 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,36 +1,56 @@
 <template>
-  <div id="root">
-    <button @click="getStudents">获取学生信息</button><br/>
-    <button @click="getCars">获取汽车信息</button>
+  <div id="app">
+    <div>
+      <section>
+        <h3>Search Github Users</h3>
+        <div>
+          <input type="text" placeholder="enter the name you search">&nbsp;<button>Search</button>
+        </div>
+      </section>
+    </div>
+    <div class="row">
+      <div class="card">
+        <a href="https://github.com/xxxxxx" target="_blank">
+          <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+        </a>
+        <p class="card-text">xxxxx</p>
+      </div>
+      <div class="card">
+        <a href="https://github.com/xxxxxx" target="_blank">
+          <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+        </a>
+        <p class="card-text">xxxxx</p>
+      </div>
+      <div class="card">
+        <a href="https://github.com/xxxxxx" target="_blank">
+          <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+        </a>
+        <p class="card-text">xxxxx</p>
+      </div>
+      <div class="card">
+        <a href="https://github.com/xxxxxx" target="_blank">
+          <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+        </a>
+        <p class="card-text">xxxxx</p>
+      </div>
+      <div class="card">
+        <a href="https://github.com/xxxxxx" target="_blank">
+          <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+        </a>
+        <p class="card-text">xxxxx</p>
+      </div>
+      <div class="card">
+        <a href="https://github.com/xxxxxx" target="_blank">
+          <img src="https://v2.cn.vuejs.org/images/logo.svg" style="width: 100px" alt=""/>
+        </a>
+        <p class="card-text">xxxxx</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import axios from "axios";
-
 export default {
-  name: "App",
-  methods: {
-    getStudents() {
-      axios.get('http://localhost:8080/stu/students').then(
-          response => {
-            console.log('请求成功了', response.data)
-          },
-          error => {
-            console.log('请求失败了', error.message)
-          }
-      )
-    },
-    getCars() {
-      axios.get('http://localhost:8080/car/cars').then(
-          response => {
-            console.log('请求成功了', response.data)
-          },
-          error => {
-            console.log('请求失败了', error.message)
-          }
-      )
-    }
-  }
+  name: "App"
 }
 </script>
diff --git a/20_脚手架/vue_code/src/components/List.vue b/20_脚手架/vue_code/src/components/List.vue
new file mode 100644
index 0000000..ca7465e
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/List.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "List"
+}
+</script>
+
+<style scoped>
+
+</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
new file mode 100644
index 0000000..ec4bfdf
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/Search.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Search"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file