androiddrew
/
vue_tachyons
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit

Browse Source
master
androiddrew 7 years ago
parent 0a72f739b1
commit 3c231cb1e1
8 changed files with 55 additions and 31 deletions
Show Stats Download Patch File Download Diff File

6
package-lock.json generated
Unescape Escape View File

@ -12922,6 +12922,12 @@
"string-width": "2.1.1" "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": { "tapable": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",

1
package.json
Unescape Escape View File

@ -19,6 +19,7 @@
"@vue/eslint-config-airbnb": "^3.0.0-beta.6", "@vue/eslint-config-airbnb": "^3.0.0-beta.6",
"node-sass": "^4.7.2", "node-sass": "^4.7.2",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"tachyons": "^4.9.1",
"vue-template-compiler": "^2.5.13" "vue-template-compiler": "^2.5.13"
}, },
"browserslist": [ "browserslist": [

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
public/index.html
Unescape Escape View File

@ -7,7 +7,7 @@
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico"> <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>vue_tachyons</title> <title>vue_tachyons</title>
</head> </head>
<body> <body class="bg-light-gray-30">
<noscript> <noscript>
<strong>We're sorry but vue_tachyons doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but vue_tachyons doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

32
src/App.vue
Unescape Escape View File

@ -1,14 +1,28 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav"> <nav-bar>
<router-link to="/">Home</router-link> | <router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/">Home</router-link>
<router-link to="/about">About</router-link> <router-link class="link dim white f5 f4-l dib mr3 mr4-l" to="/about">About</router-link>
</div> </nav-bar>
<transition name="slide-fade">
<router-view/> <router-view/>
</transition>
</div> </div>
</template> </template>
<script>
import NavBar from '@/components/NavBar.vue';
export default {
components: {
'nav-bar': NavBar,
},
};
</script>
<style lang="scss"> <style lang="scss">
@import "~tachyons";
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -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> </style>

25
src/components/HelloWorld.vue
Unescape Escape View File

@ -1,31 +1,6 @@
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <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> </div>
</template> </template>

15
src/components/NavBar.vue
Unescape Escape View File

@ -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>

3
src/router.js
Unescape Escape View File

@ -6,6 +6,9 @@ import About from './views/About.vue';
Vue.use(Router); Vue.use(Router);
export default new Router({ export default new Router({
// Use Browsers history API
mode: 'history',
linkActiveClass: 'is_active',
routes: [ routes: [
{ {
path: '/', path: '/',

Write Preview
Loading…
Cancel
Save