HelloWorld.vue 2.0 KB

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