diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index 6da73f6..98f541a 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,25 +1,27 @@
 <template>
   <div>
-    <School/>
-    <Student/>
+    <TodoHeader/>
+    <TodoList/>
+    <TodoBottom/>
   </div>
 </template>
 
 <script>
-import School from "./components/School.vue";
-import Student from "./components/Student.vue";
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoBottom from "./components/TodoBottom.vue";
+
 
 export default {
   name: "App",
   components: {
-    School,
-    Student
+    TodoHeader,
+    TodoList,
+    TodoBottom
   }
 }
 </script>
 
 <style>
-.title {
-  color: red
-}
+
 </style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/School.vue b/20_脚手架/vue_code/src/components/School.vue
deleted file mode 100644
index ba5c795..0000000
--- a/20_脚手架/vue_code/src/components/School.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="demo">
-    <h2 class="title">学校名称：{{ name }}</h2>
-    <h2>学校地址：{{ address }}</h2>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "School",
-  data() {
-    return {
-      name: "修仙学院",
-      address: "长白山",
-      msg: "欢迎学校"  // 以vc内数据为准
-    }
-  },
-}
-</script>
-
-<style lang="css" scoped>
-.demo {
-  background-color: orange;
-}
-</style>
-
diff --git a/20_脚手架/vue_code/src/components/Student.vue b/20_脚手架/vue_code/src/components/Student.vue
deleted file mode 100644
index 346047f..0000000
--- a/20_脚手架/vue_code/src/components/Student.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="demo">
-    <h2 class="title">学生名称：{{ name }}</h2>
-    <h2>学生年龄：{{ age }}</h2>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Student",
-  data() {
-    return {
-      name: "小强",
-      age: 18,
-      msg: "欢迎学生"
-    }
-  }
-}
-</script>
-
-<style lang="css" scoped>
-.demo {
-  background-color: skyblue;
-}
-</style>
-
diff --git a/20_脚手架/vue_code/src/components/TodoBottom.vue b/20_脚手架/vue_code/src/components/TodoBottom.vue
new file mode 100644
index 0000000..9e24546
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoBottom.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "TodoBottom"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoHeader.vue b/20_脚手架/vue_code/src/components/TodoHeader.vue
new file mode 100644
index 0000000..1bd885d
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoHeader.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <input type="text" placeholder="请输入你的任务名称，按回车确认">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TodoHeader"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoItem.vue b/20_脚手架/vue_code/src/components/TodoItem.vue
new file mode 100644
index 0000000..c370e4e
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <li>
+    <input type="checkbox" class="TodoItem" >
+    <span>xxxxxxx</span>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "TodoItem",
+  data() {
+    return {
+      todoList: [
+        {id: "001", title: "产品", done: true},
+        {id: "002", title: "开发", done: true},
+        {id: "003", title: "测试", done: false}
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoList.vue b/20_脚手架/vue_code/src/components/TodoList.vue
new file mode 100644
index 0000000..d441d49
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoList.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ul>
+      <TodoItem/>
+      <TodoItem/>
+    </ul>
+  </div>
+</template>
+
+<script>
+import TodoItem from "@/components/TodoItem.vue";
+export default {
+  name: "TodoList",
+  components: {TodoItem}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file