HelloWorld.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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. data() {
  36. return {
  37. msg: 'Welcome to Your Vue.js App'
  38. }
  39. }
  40. }
  41. </script>
  42. <style scoped>
  43. h3 {
  44. margin: 40px 0 0;
  45. }
  46. ul {
  47. list-style-type: none;
  48. padding: 0;
  49. }
  50. li {
  51. display: inline-block;
  52. margin: 0 10px;
  53. }
  54. a {
  55. color: #42b983;
  56. }
  57. </style>