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和js还不熟悉，并发现vue.js站点上缺少示例确实使我们很难学习这个框架。

Answer 1

试试这个：

1-在单独的.vue文件中创建组件

2-在main.js中进行全球注册

然后直接在任何组件中调用它。

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>
//...