Vue не будет отображать пользовательский компонент

Question

Я пытаюсь создать пользовательский компонент для некоторых повторяющихся HTML. Но компонент не отображается, и я получаю эту ошибку:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <Child>
       <VApp>
         <App> at src/App.vue
           <Root>

Мой main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

Vue.component('child', {
  props: ['text'],
  template: `<div>{{ text }}<div>`
});

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

Мой App.vue:

<template>
  <v-app>
    <child :text="message"></child>
    <Navbar/>
    <v-content>
      <router-view></router-view>
    </v-content>
    <Footer/>
  </v-app>
</template>

<script>
import styles from './app.css'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'

export default {
  name: 'App',
  components: { Navbar, Footer },
  computed: {
    theme(){
      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
    },
  },
  data: () => ({
    //
  }),
};
</script>

Что происходит? Как определить пользовательский компонент?

Мой вопрос "в основном содержит код";Итак, мои мысли о vue.js: я заметил, что существует довольно много разных способов или стилей для создания приложений vue.js. Хотелось бы, чтобы их примеры давали больше контекста о том, куда поместить пример кода, я опытный разработчик, но новичок в web dev и js, и считаю, что отсутствие примеров на сайте vue.js действительно затрудняет изучениеэто рамки.

Answer 1

Попробуйте это:

1 - создать компонент в отдельном файле .vue

2 - зарегистрировать его глобально в main.js

3 - затем вызвать его влюбой компонент напрямую.

1.

<template><div>{{ text }}<div></template>
<script>
    export default{
    props:['text']
    },

</script>

2. в main.js

//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...

3 Теперь вы можете вызывать его в любом компоненте, потому что он зарегистрирован глобально.

<template>
    <div>
       <child-component text='some text to pass as prop.'/>
      //...
    </div>
</template>
//...