[英][Vue warn]: Failed to mount component: template or render function not defined in Vue CLI 4
I'm trying to import v-movable ( https://github.com/thewebkid/v-movable ) in a component inside my Vue app created with Vue CLI 4, but I keep getting the following error:我正在尝试在使用 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>
Currently my main.js file looks like this:目前我的 main.js 文件如下所示:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app');
And my Intro.vue component file looks like this:我的 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>
Do I need to globally register movable in my main.js?我需要在我的 main.js 中全局注册可移动吗? How would I go about doing that?
我将如何 go 这样做? Any help would be very much appreciated, and please do let me know if there's any other information I can/should provide.
任何帮助将不胜感激,如果我可以/应该提供任何其他信息,请告诉我。
In the project's Github demo, there is a component import, which can be done in a SFC this way:在项目的 Github 演示中,有一个组件导入,可以通过这种方式在 SFC 中完成:
import movable from './components/movable';
https://codesandbox.io/s/mystifying-cartwright-yvis1 https://codesandbox.io/s/mystifying-cartwright-yvis1
You are using the plugin installation, but doing it inside of a component instead of main.js , and it's missing Vue.use
.您正在使用插件安装,但在组件内部而不是main.js中进行安装,并且缺少
Vue.use
。 Remove the import from your component and change main.js :从您的组件中删除导入并更改main.js :
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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.