add vue client folders, rename server files accordingly and update code

client/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>

client/src/components/Books.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-10">
+        <h1>Books</h1>
+        <hr>
+        <br><br>
+        <button type="button" class="btn btn-success btn-sm">Add Book</button>
+        <br><br>
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th scope="col">Title</th>
+              <th scope="col">Author</th>
+              <th scope="col">Read?</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>foo</td>
+              <td>bar</td>
+              <td>foobar</td>
+              <td>
+                <div class="btn-group" role="group">
+                  <button type="button" class="btn btn-warning btn-sm px-2">Update</button>
+                  <button type="button" class="btn btn-danger btn-sm px-1">Delete</button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>

client/src/components/Ping.vue

@@ -0,0 +1,28 @@
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'Ping',
+  data() {
+    return {
+      msg: '',
+    };
+  },
+  methods: {
+    getMessage() {
+      const path = 'http://localhost:5000/ping';
+      axios.get(path)
+        .then((res) => {
+          this.msg = res.data;
+        })
+        .catch((error) => {
+          // eslint-disable-next-line
+          console.error(error);
+        });
+    },
+  },
+  created() {
+    this.getMessage();
+  },
+};
+</script>

client/src/main.js

@@ -0,0 +1,11 @@
+import 'bootstrap/dist/css/bootstrap.css';
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app');

client/src/router.js

@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import Books from './components/Books.vue';
+import Ping from './components/Ping.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'Books',
+      component: Books,
+    },
+    {
+      path: '/ping',
+      name: 'Ping',
+      component: Ping,
+    },
+  ],
+});