Starter.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="hello">
  3. <h1>{{ msg }}</h1>
  4. <h3>Installed CLI Plugins</h3>
  5. <ul>
  6. <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
  7. <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
  8. </ul>
  9. <h3>Essential Links</h3>
  10. <ul>
  11. <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
  12. <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
  13. <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
  14. <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
  15. <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
  16. </ul>
  17. <h3>Ecosystem</h3>
  18. <ul>
  19. <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
  20. <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
  21. <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
  22. <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
  23. <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
  24. </ul>
  25. </div>
  26. </template>
  27. <script>
  28. export default {
  29. name: 'Starter',
  30. props: {
  31. msg: String
  32. }
  33. }
  34. <!-- import style -->
  35. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.4/lib/index.css" />
  36. <!-- import script -->
  37. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  38. <script src="https://cdn.jsdelivr.net/npm/vant@1.4/lib/vant.min.js"></script>
  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>