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"
   8         >vue-cli documentation</a
   9       >.
  10     </p>
  11     <h3>Installed CLI Plugins</h3>
  12     <ul>
  13       <li>
  14         <a
  15           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
  16           target="_blank"
  17           rel="noopener"
  18           >babel</a
  19         >
  20       </li>
  21       <li>
  22         <a
  23           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
  24           target="_blank"
  25           rel="noopener"
  26           >router</a
  27         >
  28       </li>
  29       <li>
  30         <a
  31           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
  32           target="_blank"
  33           rel="noopener"
  34           >vuex</a
  35         >
  36       </li>
  37       <li>
  38         <a
  39           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
  40           target="_blank"
  41           rel="noopener"
  42           >eslint</a
  43         >
  44       </li>
  45     </ul>
  46     <h3>Essential Links</h3>
  47     <ul>
  48       <li>
  49         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
  50       </li>
  51       <li>
  52         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
  53           >Forum</a
  54         >
  55       </li>
  56       <li>
  57         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
  58           >Community Chat</a
  59         >
  60       </li>
  61       <li>
  62         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
  63           >Twitter</a
  64         >
  65       </li>
  66       <li>
  67         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
  68       </li>
  69     </ul>
  70     <h3>Ecosystem</h3>
  71     <ul>
  72       <li>
  73         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
  74           >vue-router</a
  75         >
  76       </li>
  77       <li>
  78         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
  79       </li>
  80       <li>
  81         <a
  82           href="https://github.com/vuejs/vue-devtools#vue-devtools"
  83           target="_blank"
  84           rel="noopener"
  85           >vue-devtools</a
  86         >
  87       </li>
  88       <li>
  89         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
  90           >vue-loader</a
  91         >
  92       </li>
  93       <li>
  94         <a
  95           href="https://github.com/vuejs/awesome-vue"
  96           target="_blank"
  97           rel="noopener"
  98           >awesome-vue</a
  99         >
 100       </li>
 101     </ul>
 102   </div>
 103 </template>
 104
 105 <script>
 106 export default {
 107   name: "HelloWorld",
 108   props: {
 109     msg: String,
 110   },
 111 };
 112 </script>
 113
 114 <!-- Add "scoped" attribute to limit CSS to this component only -->
 115 <style scoped lang="scss">
 116 h3 {
 117   margin: 40px 0 0;
 118 }
 119 ul {
 120   list-style-type: none;
 121   padding: 0;
 122 }
 123 li {
 124   display: inline-block;
 125   margin: 0 10px;
 126 }
 127 a {
 128   color: #42b983;
 129 }
 130 </style>