diff options
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/HelloWorld.vue | 58 | ||||
-rw-r--r-- | src/main.js | 8 |
4 files changed, 94 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..fcc5662 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,28 @@ +<template> + <div id="app"> + <img alt="Vue logo" src="./assets/logo.png"> + <HelloWorld msg="Welcome to Your Vue.js App"/> + </div> +</template> + +<script> +import HelloWorld from './components/HelloWorld.vue' + +export default { + name: 'app', + components: { + HelloWorld + } +} +</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 new file mode 100644 index 0000000..f3d2503 --- /dev/null +++ b/src/assets/logo.png Binary files differdiff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..879051a --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,58 @@ +<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-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> +</template> + +<script> +export default { + name: 'HelloWorld', + props: { + msg: String + } +} +</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> diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..63eb05f --- /dev/null +++ b/src/main.js @@ -0,0 +1,8 @@ +import Vue from 'vue' +import App from './App.vue' + +Vue.config.productionTip = false + +new Vue({ + render: h => h(App), +}).$mount('#app') |