summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/HelloWorld.vue60
1 files changed, 60 insertions, 0 deletions
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..1c544cb
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,60 @@
1<template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <p>
5 For a guide and recipes on how to configure / customize this project,<br>
6 check out the
7 <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 </p>
9 <h3>Installed CLI Plugins</h3>
10 <ul>
11 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15 </ul>
16 <h3>Essential Links</h3>
17 <ul>
18 <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
19 <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
20 <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
21 <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
22 <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
23 </ul>
24 <h3>Ecosystem</h3>
25 <ul>
26 <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
27 <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
28 <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
29 <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
30 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
31 </ul>
32 </div>
33</template>
34
35<script>
36export default {
37 name: 'HelloWorld',
38 props: {
39 msg: String
40 }
41}
42</script>
43
44<!-- Add "scoped" attribute to limit CSS to this component only -->
45<style scoped>
46h3 {
47 margin: 40px 0 0;
48}
49ul {
50 list-style-type: none;
51 padding: 0;
52}
53li {
54 display: inline-block;
55 margin: 0 10px;
56}
57a {
58 color: #42b983;
59}
60</style>