client/src/components/HelloWorld.vue

   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-eslint" target="_blank" rel="noopener">eslint</a></li>
  12     </ul>
  13     <h3>Essential Links</h3>
  14     <ul>
  15       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
  16       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
  17       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
  18       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
  19       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
  20     </ul>
  21     <h3>Ecosystem</h3>
  22     <ul>
  23       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
  24       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
  25       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
  26       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
  27       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
  28     </ul>
  29   </div>
  30 </template>
  31
  32 <script>
  33 export default {
  34   name: "HelloWorld",
  35   props: {
  36     msg: String
  37   },
  38 //  created: function() {
  39 //      alert("test");
  40 //  },
  41     methods: {
  42
  43     },
  44 };
  45 </script>
  46
  47 <!-- Add "scoped" attribute to limit CSS to this component only -->
  48 <style scoped lang="scss">
  49 h3 {
  50   margin: 40px 0 0;
  51 }
  52 ul {
  53   list-style-type: none;
  54   padding: 0;
  55 }
  56 li {
  57   display: inline-block;
  58   margin: 0 10px;
  59 }
  60 a {
  61   color: #42b983;
  62 }
  63 </style>