Vue.js 武元'；不渲染自定义组件

我正在尝试为一些重复的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>

[Vue warn]：在模板编译器不可用的情况下，您使用的是仅运行时版本的Vue。可以将模板预编译为呈现函数，也可以使用编译器附带的构建。
发现于
---> 
在src/App.vue

My 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')

从“Vue”导入Vue
从“./App.vue”导入应用程序
从“./路由器”导入路由器
从“./plugins/vuetify”导入vuetify
Vue.config.productionTip=false
Vue.component（'子'{
道具：['text']，
模板：`{text}}`
});
新Vue({
路由器，
vuetify，
渲染：h=>h（应用程序）
}).$mount（“#应用程序”）

我的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>

从“./app.css”导入样式
从“@/components/Navbar”导入Navbar
从“@/components/Footer”导入页脚
导出默认值{
名称：“应用程序”，
组件：{Navbar，Footer}，
计算：{
主题（）{
return（this.$vuetify.theme.dark）？“dark”：“light”
},
},
数据：（）=>({
//
}),
};

发生了什么事？如何定义自定义组件

我的问题“大部分是代码”；因此，我对vue.js的看法是：我注意到构建vue.js应用程序有很多不同的方法或风格。我希望他们的示例能够提供更多关于示例代码放置位置的上下文，我是一名经验丰富的开发人员，但对web开发人员和js来说是新手，我发现vue.js网站上缺少示例确实使学习此框架变得很困难。

尝试以下方法：

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

2-在main.js中全局注册

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

1.

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

</script>

3现在您可以在任何组件中调用它，因为它是全局注册的

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

//...
//...

为什么不创建一个名为Child的组件？我认为这会更容易。如果您使用自己的

.vue

文件将子组件创建为SFC（单文件组件），然后通过Webpack编译模板，将其转换为

渲染

函数，请检查此处。Vue的仅运行时版本不包括模板编译器，使其更小。这个较小的版本通常是在浏览器中使用的版本，因为如果模板已经由Webpack编译，则不需要编译模板。看和@shirtle:是的！成功了。因此，您认为Vue.component方法不适合我，因为我使用WebPack。奇怪，但这是可行的。Webpack并不编译所有模板，它专门针对SFC的模板。如果在

main.js

中内联指定模板，它将不会由Webpack编译，需要在浏览器中编译，需要完整的Vue构建。您仍然可以将

Vue.component

与SFC一起使用，使用

Vue.component

与问题无关。如果要启用完整构建，我建议使用CLI附带的UI，请使用

vue UI

运行它。

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