diff options
| author | Roger Braun <roger@rogerbraun.net> | 2016-10-26 16:46:32 +0200 |
|---|---|---|
| committer | Roger Braun <roger@rogerbraun.net> | 2016-10-26 16:46:32 +0200 |
| commit | 191c02af1ebfc7e6c53dc88d97c4e3ca23fbea8b (patch) | |
| tree | b3a132f8eba6ee92d6ec2a581f0bf33e1852010b /src | |
Basic skeleton
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 28 | ||||
| -rw-r--r-- | src/assets/logo.png | bin | 0 -> 6849 bytes | |||
| -rw-r--r-- | src/components/Hello.vue | 44 | ||||
| -rw-r--r-- | src/components/hello/Hello.css | 0 | ||||
| -rw-r--r-- | src/components/hello/Hello.html | 0 | ||||
| -rw-r--r-- | src/components/hello/Hello.js | 8 | ||||
| -rw-r--r-- | src/components/hello/Hello.vue | 44 | ||||
| -rw-r--r-- | src/main.js | 9 |
8 files changed, 133 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 00000000..48741ed1 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,28 @@ +<template> + <div id="app"> + <img src="./assets/logo.png"> + <hello></hello> + </div> +</template> + +<script> +import Hello from './components/hello/Hello' + +export default { + name: 'app', + components: { + Hello + } +} +</script> + +<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> diff --git a/src/assets/logo.png b/src/assets/logo.png Binary files differnew file mode 100644 index 00000000..f3d2503f --- /dev/null +++ b/src/assets/logo.png diff --git a/src/components/Hello.vue b/src/components/Hello.vue new file mode 100644 index 00000000..58ca7687 --- /dev/null +++ b/src/components/Hello.vue @@ -0,0 +1,44 @@ +<template> + <div class="hello"> + <h1>{{ 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://gitter.im/vuejs/vue" target="_blank">Gitter 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 src='./Hello.js' /> + +<!-- 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; +} +</style> diff --git a/src/components/hello/Hello.css b/src/components/hello/Hello.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/components/hello/Hello.css diff --git a/src/components/hello/Hello.html b/src/components/hello/Hello.html new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/components/hello/Hello.html diff --git a/src/components/hello/Hello.js b/src/components/hello/Hello.js new file mode 100644 index 00000000..609bdbdc --- /dev/null +++ b/src/components/hello/Hello.js @@ -0,0 +1,8 @@ +export default { + name: 'hello', + data () { + return { + msg: 'Welcome to Your Vue.js app' + }; + } +}; diff --git a/src/components/hello/Hello.vue b/src/components/hello/Hello.vue new file mode 100644 index 00000000..828136a8 --- /dev/null +++ b/src/components/hello/Hello.vue @@ -0,0 +1,44 @@ +<template> + <div class="hello"> + <h1>{{ 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://gitter.im/vuejs/vue" target="_blank">Gitter 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 src='./Hello.js'></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; +} +</style> diff --git a/src/main.js b/src/main.js new file mode 100644 index 00000000..15369fa8 --- /dev/null +++ b/src/main.js @@ -0,0 +1,9 @@ +import Vue from 'vue' +import App from './App' + +/* eslint-disable no-new */ +new Vue({ + el: '#app', + template: '<App/>', + components: { App } +}) |
