Initial Commit

src/App.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :style="window.style">
+    <div style="width: 1680px;height: 1050px;background-image: url('https://wallpapercave.com/wp/mvdjImO.jpg')">
+      <router-view/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data: function () {
+    return {
+      window: {
+        width: 1680,
+        height: 1050,
+        style: ''
+      }
+    }
+  },
+  created () {
+    window.addEventListener('resize', this.handleResize)
+    this.handleResize()
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  computed: {
+    windowSize: function () {
+      return `width: ${this.window.width};height: ${this.window.height}`
+    }
+  },
+  methods: {
+    handleResize () {
+      var appWidth = window.innerWidth
+      var appHeight = window.innerHeight
+      var ratio = appHeight / appWidth
+      var originalRatio = this.window.height / this.window.width
+      var scale = 1
+      if (ratio === originalRatio) {
+      } else if (ratio > originalRatio) {
+        // extra height so zoom  for width ratio
+        scale = appWidth / this.window.width
+      } else {
+        // extra width so zoom for height ratio
+        scale = appHeight / this.window.height
+      }
+      this.window.style = `zoom: ${scale};`
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="hello">
+    <h1 style="margin-top: 0">{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+.hello {
+  top-margin: 0px;
+  width: 100vw;
+  height: 100vh;
+  color: #fff;
+}
+</style>

src/main.js

@@ -0,0 +1,15 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/router/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import HelloWorld from '@/components/HelloWorld'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'HelloWorld',
+      component: HelloWorld
+    }
+  ]
+})