HelloWorld.vue 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import viteLogo from '../assets/vite.svg'
  4. import heroImg from '../assets/hero.png'
  5. import vueLogo from '../assets/vue.svg'
  6. const count = ref(0)
  7. </script>
  8. <template>
  9. <section id="center">
  10. <div class="hero">
  11. <img :src="heroImg" class="base" width="170" height="179" alt="" />
  12. <img :src="vueLogo" class="framework" alt="Vue logo" />
  13. <img :src="viteLogo" class="vite" alt="Vite logo" />
  14. </div>
  15. <div>
  16. <h1>Get started</h1>
  17. <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
  18. </div>
  19. <button type="button" class="counter" @click="count++">
  20. Count is {{ count }}
  21. </button>
  22. </section>
  23. <div class="ticks"></div>
  24. <section id="next-steps">
  25. <div id="docs">
  26. <svg class="icon" role="presentation" aria-hidden="true">
  27. <use href="/icons.svg#documentation-icon"></use>
  28. </svg>
  29. <h2>Documentation</h2>
  30. <p>Your questions, answered</p>
  31. <ul>
  32. <li>
  33. <a href="https://vite.dev/" target="_blank">
  34. <img class="logo" :src="viteLogo" alt="" />
  35. Explore Vite
  36. </a>
  37. </li>
  38. <li>
  39. <a href="https://vuejs.org/" target="_blank">
  40. <img class="button-icon" :src="vueLogo" alt="" />
  41. Learn more
  42. </a>
  43. </li>
  44. </ul>
  45. </div>
  46. <div id="social">
  47. <svg class="icon" role="presentation" aria-hidden="true">
  48. <use href="/icons.svg#social-icon"></use>
  49. </svg>
  50. <h2>Connect with us</h2>
  51. <p>Join the Vite community</p>
  52. <ul>
  53. <li>
  54. <a href="https://github.com/vitejs/vite" target="_blank">
  55. <svg class="button-icon" role="presentation" aria-hidden="true">
  56. <use href="/icons.svg#github-icon"></use>
  57. </svg>
  58. GitHub
  59. </a>
  60. </li>
  61. <li>
  62. <a href="https://chat.vite.dev/" target="_blank">
  63. <svg class="button-icon" role="presentation" aria-hidden="true">
  64. <use href="/icons.svg#discord-icon"></use>
  65. </svg>
  66. Discord
  67. </a>
  68. </li>
  69. <li>
  70. <a href="https://x.com/vite_js" target="_blank">
  71. <svg class="button-icon" role="presentation" aria-hidden="true">
  72. <use href="/icons.svg#x-icon"></use>
  73. </svg>
  74. X.com
  75. </a>
  76. </li>
  77. <li>
  78. <a href="https://bsky.app/profile/vite.dev" target="_blank">
  79. <svg class="button-icon" role="presentation" aria-hidden="true">
  80. <use href="/icons.svg#bluesky-icon"></use>
  81. </svg>
  82. Bluesky
  83. </a>
  84. </li>
  85. </ul>
  86. </div>
  87. </section>
  88. <div class="ticks"></div>
  89. <section id="spacer"></section>
  90. </template>