Initial commit

7 years ago · 3c231cb1e1
parent 0a72f739b1
commit 3c231cb1e1
8 changed files with 55 additions and 31 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12922,6 +12922,12 @@
        "string-width": "2.1.1"
      }
    },
+    "tachyons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/tachyons/-/tachyons-4.9.1.tgz",
+      "integrity": "sha512-trJFXhzDZeHRcd9Bqn6ub3e0VqGWKMsGdP7RJoT+8Ihoak41o1qCwqcFx8hsFlfFWa6a4jsb464TNXnTt+MPnw==",
+      "dev": true
+    },
    "tapable": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "@vue/eslint-config-airbnb": "^3.0.0-beta.6",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
+    "tachyons": "^4.9.1",
    "vue-template-compiler": "^2.5.13"
  },
  "browserslist": [
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -7,7 +7,7 @@
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>vue_tachyons</title>
  </head>
-  <body>
+  <body class="bg-light-gray-30">
    <noscript>
      <strong>We're sorry but vue_tachyons doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,14 +1,28 @@
 <template>
  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <nav-bar>
+      <router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/">Home</router-link>
+      <router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/about">About</router-link>
+    </nav-bar>
+    <transition name="slide-fade">
+      <router-view/>
+    </transition>
  </div>
 </template>
+<script>
+import NavBar from '@/components/NavBar.vue';
+
+export default {
+  components: {
+    'nav-bar': NavBar,
+  },
+};
+</script>
+

 <style lang="scss">
+@import "~tachyons";
+
 #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
@ -26,4 +40,14 @@
    }
  }
 }
+
+.slide-fade-enter-active {
+  transition: all .3s ease;
+}
+
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
 </style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,31 +1,6 @@
 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
-    <p>
-      For guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">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">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <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>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org/en/essentials/getting-started.html" target="_blank">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org/en/intro.html" target="_blank">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org/en" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
  </div>
 </template>

--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@ -0,0 +1,15 @@
+<template>
+  <nav class="db dt-l w-100 border-box pa2 ph5-l bg-green">
+  <a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb1 mb0-l" href="/" title="Home">
+    <img src="http://tachyons.io/img/logo.jpg" class="dib w3 h3 br-100" alt="Site Name">
+  </a>
+  <div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
+    <slot></slot>
+  </div>
+  </nav>
+</template>
+<script>
+export default {
+  name: 'nav-bar',
+};
+</script>
--- a/src/router.js
+++ b/src/router.js
@ -6,6 +6,9 @@ import About from './views/About.vue';
 Vue.use(Router);

 export default new Router({
+  // Use Browsers history API
+  mode: 'history',
+  linkActiveClass: 'is_active',
  routes: [
    {
      path: '/',