[Vue warn]：无法挂载组件：Vue CLI 4 中未定义模板或渲染函数

Question

我正在尝试在使用 Vue CLI 4 创建的 Vue 应用程序中的组件中导入 v-movable (https://github.com/thewebkid/v-movable)，但我不断收到以下错误：

[Vue warn]: Failed to mount component: template or render function not defined.

  found in

    ---> <Movable>
      <Intro>
        <App> at src/App.vue
          <Root>

目前我的 main.js 文件如下所示：

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

Vue.config.productionTip = false

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

我的 Intro.vue 组件文件如下所示：

<template>
  <div class="intro">
    <div class="guideline">
      <div class="circle start-circle"></div>
      <movable class="circle end-circle">
        <IconSlideUp id="icon-slide-up" />
        <span class="label">Slide</span>
      </movable>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
import IconSlideUp from '@/assets/icon-slide-up.svg'
import movable from 'v-movable'

export default {
  name: 'Intro',
  props: {
    msg: String
  },
  components: {
    IconSlideUp,
    movable
  },
  methods: {
    
  }
}
</script>


<style scoped lang="scss">
...
</style>

我是否需要在 main.js 中全局注册 movable？我该怎么做呢？非常感谢任何帮助，如果我 can/should 提供了任何其他信息，请告诉我。

Answer 1

在项目的Githubdemo中，有一个组件导入，可以这样在SFC中完成：

import movable from './components/movable';

^{https://codesandbox.io/s/mystifying-cartwright-yvis1}

您正在使用插件安装，但它是在一个组件而不是 main.js 内执行的，并且缺少 Vue.use。从组件中删除导入并更改 main.js:

main.js

import Vue from 'vue'
import App from './App.vue';
import movable from 'v-movable';

Vue.use(movable);

Vue.config.productionTip = false;

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

[Vue warn]：无法挂载组件：Vue CLI 4 中未定义模板或渲染函数

[Vue warn]: Failed to mount component: template or render function not defined in Vue CLI 4

javascript

vue.js

vue-component

vuejs2

vue-cli