add List, Card

src/App.vue

@@ -1,10 +1,31 @@
 <template>
-  <div id="app" />
+  <div id="app">
+    <List v-for="list in lists" :key="list.id" class="list" :list="list" />
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import List from "@/components/List.vue";
+import { IList } from "@/types";
+import { initialLists } from "@/initialData";
 
-@Component
-export default class App extends Vue {}
+@Component({
+  components: {
+    List
+  }
+})
+export default class App extends Vue {
+  lists: IList[] = initialLists;
+}
 </script>
+
+<style lang="scss" scoped>
+#app {
+  display: flex;
+
+  > .list {
+    margin: 1px;
+  }
+}
+</style>

src/components/Card.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="card">
+    {{ card.text }}
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { ICard } from "@/types";
+
+@Component
+export default class Card extends Vue {
+  @Prop({ type: Object, required: true })
+  readonly card!: ICard;
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  border: 1px solid #000000;
+}
+</style>

src/components/List.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="list">
+    {{ list.name }}
+    <Card v-for="card in list.cards" :key="card.id" class="card" :card="card" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import Card from "@/components/Card.vue";
+import { IList } from "@/types";
+
+@Component({
+  components: {
+    Card
+  }
+})
+export default class List extends Vue {
+  @Prop({ type: Object, required: true })
+  readonly list!: IList;
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  border: 1px solid #000000;
+
+  > .card {
+    margin: 1px;
+  }
+}
+</style>

src/initialData.ts

@@ -0,0 +1,32 @@
+import { IList } from "@/types";
+
+export const initialLists: IList[] = [
+  {
+    id: 1,
+    name: "リスト1",
+    cards: [
+      {
+        id: 1,
+        text: "タスク1"
+      },
+      {
+        id: 2,
+        text: "タスク2"
+      }
+    ]
+  },
+  {
+    id: 2,
+    name: "リスト2",
+    cards: [
+      {
+        id: 3,
+        text: "タスク3"
+      },
+      {
+        id: 4,
+        text: "タスク4"
+      }
+    ]
+  }
+];

src/types.ts

@@ -0,0 +1,10 @@
+export interface IList {
+  readonly id: number;
+  name: string;
+  cards: ICard[];
+}
+
+export interface ICard {
+  readonly id: number;
+  text: string;
+}