added vuetify

package-lock.json

         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "3.9.97",
+      "resolved": "https://registry.npm.taobao.org/@mdi/font/download/@mdi/font-3.9.97.tgz",
+      "integrity": "sha1-ufMeBVdEUuhPV+W4HTT/1ZO8nCk="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npm.taobao.org/clone-deep/download/clone-deep-4.0.1.tgz",
+      "integrity": "sha1-wZ/Zvbv4WUK0/ZechNz31fB8I4c=",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz",
         }
       }
     },
+    "interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/interpret/download/interpret-1.2.0.tgz",
+      "integrity": "sha1-1QYaYiS+WOgIOYX1AU2EQ1lXYpY=",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz",
         "readable-stream": "^2.0.2"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npm.taobao.org/rechoir/download/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz",
         "inherits": "^2.0.1"
       }
     },
+    "roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npm.taobao.org/roboto-fontface/download/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha1-fu5Az6GLH35OYF6vGidAr7b9cbA="
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npm.taobao.org/run-async/download/run-async-2.4.1.tgz",
       "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npm.taobao.org/sass/download/sass-1.26.5.tgz",
+      "integrity": "sha1-LXrs+7q/ophWfI8GYVtuJNLWgJk=",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-8.0.2.tgz?cache=0&sync_timestamp=1578921506275&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-8.0.2.tgz",
+      "integrity": "sha1-3r7NjDziQ8dkVPLoKQSCFQOACQ0=",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1586886225130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
+          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npm.taobao.org/shallow-clone/download/shallow-clone-3.0.1.tgz",
+      "integrity": "sha1-jymBrZJTH1UDWwH7IwdppA4C76M=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz",
       "integrity": "sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.8.4.tgz?cache=0&sync_timestamp=1587787497223&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fshelljs%2Fdownload%2Fshelljs-0.8.4.tgz",
+      "integrity": "sha1-3naE/ut2f4cWsyYHiooAh1iQ48I=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz",
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.5.tgz",
+      "integrity": "sha1-Cbp4koZT/H44Aeo35RIPlXQT3aQ=",
+      "dev": true,
+      "requires": {
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.2.tgz?cache=0&sync_timestamp=1586886225130&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.2.tgz",
+          "integrity": "sha1-YElisFK4HtB4aq6EOJ/7pw/9OTg=",
+          "dev": true
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.0.0.tgz",
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.2.27",
+      "resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.2.27.tgz",
+      "integrity": "sha1-ooy2dzt8Vc2OnO3KwGEzuIbI7uQ="
+    },
+    "vuetify-loader": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.4.3.tgz",
+      "integrity": "sha1-3xMjxVi+CYkId+X76BezpxpsU40=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.0"
+      }
+    },
     "vuex": {
       "version": "3.4.0",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.4.0.tgz",

package.json

     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@mdi/font": "^3.6.95",
     "core-js": "^3.6.4",
     "register-service-worker": "^1.7.1",
+    "roboto-fontface": "*",
     "vue": "^2.6.11",
+    "vuetify": "^2.2.11",
     "vuex": "^3.1.3"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "vue-cli-plugin-vuetify": "~2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   }
 }

src/App.vue

 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <v-app>
+    <v-app-bar
+      app
+      color="primary"
+      dark
+    >
+      <div class="d-flex align-center">
+        <v-img
+          alt="Vuetify Logo"
+          class="shrink mr-2"
+          contain
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
+          transition="scale-transition"
+          width="40"
+        />
+
+        <v-img
+          alt="Vuetify Name"
+          class="shrink mt-1 hidden-sm-and-down"
+          contain
+          min-width="100"
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
+          width="100"
+        />
+      </div>
+
+      <v-spacer></v-spacer>
+
+      <v-btn
+        href="https://github.com/vuetifyjs/vuetify/releases/latest"
+        target="_blank"
+        text
+      >
+        <span class="mr-2">Latest Release</span>
+        <v-icon>mdi-open-in-new</v-icon>
+      </v-btn>
+    </v-app-bar>
+
+    <v-content>
+      <HelloWorld/>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld';
 
 export default {
   name: 'App',
+
   components: {
-    HelloWorld
-  }
-}
-</script>
+    HelloWorld,
+  },
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+  data: () => ({
+    //
+  }),
+};
+</script>

src/components/HelloWorld.vue

 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
+  <v-app id="inspire">
+    <v-navigation-drawer
+      v-model="drawer"
+      :clipped="$vuetify.breakpoint.lgAndUp"
+      app
+    >
+      <v-list dense>
+        <template v-for="item in items">
+          <v-row v-if="item.heading" :key="item.heading" align="center">
+            <v-col cols="6">
+              <v-subheader v-if="item.heading">
+                {{ item.heading }}
+              </v-subheader>
+            </v-col>
+            <v-col cols="6" class="text-center">
+              <a href="#!" class="body-2 black--text">EDIT</a>
+            </v-col>
+          </v-row>
+          <v-list-group
+            v-else-if="item.children"
+            :key="item.text"
+            v-model="item.model"
+            :prepend-icon="item.model ? item.icon : item['icon-alt']"
+            append-icon=""
+          >
+            <template v-slot:activator>
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ item.text }}
+                </v-list-item-title>
+              </v-list-item-content>
+            </template>
+            <v-list-item v-for="(child, i) in item.children" :key="i" link>
+              <v-list-item-action v-if="child.icon">
+                <v-icon>{{ child.icon }}</v-icon>
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ child.text }}
+                </v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+          <v-list-item v-else :key="item.text" link>
+            <v-list-item-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.text }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="red" dark>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+      <v-btn to="/about" text color="blue">
+        <span class="mr-2">Panda</span>
+        <!-- <v-icon>mdi-open-in-new</v-icon> -->
+      </v-btn>
+      <v-btn to="/home" text color="blue">
+        <span class="mr-2">Home</span>
+        <!-- <v-icon>mdi-open-in-new</v-icon> -->
+      </v-btn>
+      <v-btn to="/HelloWorld" text color="blue">
+        <span class="mr-2">HelloWorld</span>
+        <!-- <v-icon>mdi-open-in-new</v-icon> -->
+      </v-btn>
+      <v-btn to="/apply" text color="blue">
+        <span class="mr-2">Apply</span>
+        <!-- <v-icon>mdi-open-in-new</v-icon> -->
+      </v-btn>
+      <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
+        <span class="hidden-sm-and-down">Google Contacts</span>
+      </v-toolbar-title>
+      <v-text-field
+        flat
+        solo-inverted
+        hide-details
+        prepend-inner-icon="mdi-magnify"
+        label="Search"
+        class="hidden-sm-and-down"
+      />
+      <v-spacer />
+      <v-btn icon>
+        <v-icon>mdi-apps</v-icon>
+      </v-btn>
+      <v-btn icon>
+        <v-icon>mdi-bell</v-icon>
+      </v-btn>
+      <v-btn icon large>
+        <v-avatar size="32px" item>
+          <v-img
+            src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
+            alt="Vuetify"
+        /></v-avatar>
+      </v-btn>
+    </v-app-bar>
+    <v-content>
+      <!-- <About /> -->
+    </v-content>
+    <!-- <v-content>
+      <v-container
+        class="fill-height"
+        fluid
+      >
+        <v-row
+          align="center"
+          justify="center"
+        >
+          <v-tooltip right>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                :href="source"
+                icon
+                large
+                target="_blank"
+                v-on="on"
+              >
+                <v-icon large>mdi-code-tags</v-icon>
+              </v-btn>
+            </template>
+            <span>Source</span>
+          </v-tooltip>
+          <v-tooltip right>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                icon
+                large
+                href="https://codepen.io/johnjleider/pen/MNYLdL"
+                target="_blank"
+                v-on="on"
+              >
+                <v-icon large>mdi-codepen</v-icon>
+              </v-btn>
+            </template>
+            <span>Codepen</span>
+          </v-tooltip>
+        </v-row>
+      </v-container>
+    </v-content> -->
+    <v-btn bottom color="pink" dark fab fixed right @click="dialog = !dialog">
+      <v-icon>mdi-plus</v-icon>
+    </v-btn>
+
+    <!-- // --------------------------------------------------------------------------------------- // -->
+    <v-dialog v-model="dialog" width="800px">
+      <v-card>
+        <v-card-title class="grey darken-2">
+          Create contact
+        </v-card-title>
+        <v-container>
+          <v-row class="mx-2">
+            <v-col class="align-center justify-space-between" cols="12">
+              <v-row align="center" class="mr-0">
+                <v-avatar size="40px" class="mx-3">
+                  <img
+                    src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
+                    alt=""
+                  />
+                </v-avatar>
+                <v-text-field placeholder="Name" />
+              </v-row>
+            </v-col>
+            <v-col cols="6">
+              <v-text-field
+                prepend-icon="mdi-account-card-details-outline"
+                placeholder="Company"
+              />
+            </v-col>
+            <v-col cols="6">
+              <v-text-field placeholder="Job title" />
+            </v-col>
+            <v-col cols="12">
+              <v-text-field prepend-icon="mdi-mail" placeholder="Email" />
+            </v-col>
+            <v-col cols="12">
+              <v-text-field
+                type="tel"
+                prepend-icon="mdi-phone"
+                placeholder="(000) 000 - 0000"
+              />
+            </v-col>
+            <v-col cols="12">
+              <v-text-field prepend-icon="mdi-text" placeholder="Notes" />
+            </v-col>
+          </v-row>
+        </v-container>
+        <v-card-actions>
+          <v-btn text color="primary">More</v-btn>
+          <v-spacer />
+          <v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
+          <v-btn text @click="dialog = false">Save</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-app>
 </template>
 
 <script>
+import About from "@/views/About";
 export default {
-  name: 'HelloWorld',
+  name: "Apply",
+  components: {
+    About
+  },
   props: {
-    msg: String
-  }
-}
+    source: String
+  },
+  data: () => ({
+    dialog: false,
+    drawer: null,
+    items: [
+      { icon: "mdi-contacts", text: "Contacts" },
+      { icon: "mdi-history", text: "Frequently contacted" },
+      { icon: "mdi-content-copy", text: "Duplicates" },
+      {
+        icon: "mdi-chevron-up",
+        "icon-alt": "mdi-chevron-down",
+        text: "Labels",
+        model: true,
+        children: [{ icon: "mdi-plus", text: "Create label" }]
+      },
+      {
+        icon: "mdi-chevron-up",
+        "icon-alt": "mdi-chevron-down",
+        text: "More",
+        model: false,
+        children: [
+          { text: "Import" },
+          { text: "Export" },
+          { text: "Print" },
+          { text: "Undo changes" },
+          { text: "Other contacts" }
+        ]
+      },
+      { icon: "mdi-settings", text: "Settings" },
+      { icon: "mdi-message", text: "Send feedback" },
+      { icon: "mdi-help-circle", text: "Help" },
+      { icon: "mdi-cellphone-link", text: "App downloads" },
+      { icon: "mdi-keyboard", text: "Go to the old version" }
+    ]
+  })
+};
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

 import App from './App.vue'
 import './registerServiceWorker'
 import store from './store'
+import vuetify from './plugins/vuetify';
+import 'roboto-fontface/css/roboto/roboto-fontface.css'
+import '@mdi/font/css/materialdesignicons.css'
 
 Vue.config.productionTip = false
 
 new Vue({
   store,
+  vuetify,
   render: h => h(App)
 }).$mount('#app')