VueJS 没有被渲染

Question

我正在尝试这个简单的 sn-p：

main.js:

import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    collapseOnScroll: true,
  }),
})

App.vue:

<div id="app">
  <v-app id="inspire">
    <v-card class="overflow-hidden">
      <v-app-bar
        :collapse="!collapseOnScroll"
        :collapse-on-scroll="collapseOnScroll"
        absolute
        color="deep-purple accent-4"
        dark
        scroll-target="#scrolling-techniques-6"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Collapsing Bar</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-checkbox
          v-model="collapseOnScroll"
          color="white"
          hide-details
        ></v-checkbox>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-6"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px;"></v-container>
      </v-sheet>
    </v-card>
  </v-app>
</div>

但是当我打开http://localhost:8080/ 时，我只看到一个空白页。尽管我的开发工具上没有错误，并且我的控制台中也没有看到任何错误，但没有呈现任何内容。有人可以帮我解决这个问题吗？

Answer 1

问题是您导出根组件但不渲染它。要渲染它，请使用这行代码render: h => h(App)。 Vue 还需要知道 挂载 Vue 实例的位置，因此调用方法$mount，并提供DOM 元素的 CSS 选择器，Vue 实例将挂载到哪里。

import Vue from 'vue'
import App from './App
import Vuetify from 'vuetify'

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')