App.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <%_ if (!rootOptions.router) { _%>
  2. <template>
  3. <div id="app">
  4. <img alt="Vue logo" src="./assets/logo.png">
  5. <%_ if (!rootOptions.bare) { _%>
  6. <HelloWorld msg="Welcome to Your Vue.js App"/>
  7. <%_ } else { _%>
  8. <h1>Welcome to Your Vue.js App</h1>
  9. <%_ } _%>
  10. </div>
  11. </template>
  12. <%_ if (!rootOptions.bare) { _%>
  13. <script>
  14. import HelloWorld from './components/HelloWorld.vue'
  15. export default {
  16. name: 'app',
  17. components: {
  18. HelloWorld
  19. }
  20. }
  21. </script>
  22. <%_ } _%>
  23. <%_ } else { _%>
  24. <template>
  25. <div id="app">
  26. <div id="nav">
  27. <router-link to="/">Home</router-link> |
  28. <router-link to="/about">About</router-link>
  29. </div>
  30. <router-view/>
  31. </div>
  32. </template>
  33. <%_ } _%>
  34. <%_ if (!rootOptions.bare) { _%>
  35. <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
  36. <style<%-
  37. rootOptions.cssPreprocessor
  38. ? ` lang="${
  39. rootOptions.cssPreprocessor.includes('sass')
  40. ? 'scss'
  41. : rootOptions.cssPreprocessor
  42. }"`
  43. : ``
  44. %>>
  45. #app {
  46. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  47. -webkit-font-smoothing: antialiased;
  48. -moz-osx-font-smoothing: grayscale;
  49. text-align: center;
  50. color: #2c3e50;
  51. <%_ if (!rootOptions.router) { _%>
  52. margin-top: 60px;
  53. <%_ } _%>
  54. }
  55. <%_ if (rootOptions.router) { _%>
  56. <%_ if (!rootOptions.cssPreprocessor) { _%>
  57. #nav {
  58. padding: 30px;
  59. }
  60. #nav a {
  61. font-weight: bold;
  62. color: #2c3e50;
  63. }
  64. #nav a.router-link-exact-active {
  65. color: #42b983;
  66. }
  67. <%_ } else { _%>
  68. #nav {
  69. padding: 30px;
  70. a {
  71. font-weight: bold;
  72. color: #2c3e50;
  73. &.router-link-exact-active {
  74. color: #42b983;
  75. }
  76. }
  77. }
  78. <%_ } _%>
  79. <%_ } _%>
  80. </style>
  81. <%_ } else { _%>
  82. <style lang="stylus">
  83. #app
  84. font-family 'Avenir', Helvetica, Arial, sans-serif
  85. -webkit-font-smoothing antialiased
  86. -moz-osx-font-smoothing grayscale
  87. text-align center
  88. color #2c3e50
  89. <%_ if (!rootOptions.router) { _%>
  90. margin-top 60px
  91. <%_ } _%>
  92. <%_ if (rootOptions.router) { _%>
  93. #nav
  94. padding 30px
  95. a
  96. font-weight bold
  97. color #2c3e50
  98. &.router-link-exact-active
  99. color #42b983
  100. <%_ } _%>
  101. </style>
  102. <%_ } _%>
  103. <%_ } _%>