[Vue 警告]：无法挂载组件：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 中全局注册可移动吗？我该怎么做呢？任何帮助将不胜感激，如果我可以/应该提供任何其他信息，请告诉我。

Answer 1

在项目的 Github 演示中，有一个组件导入，可以这样在 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');