Question

我已经在我的welcome.blade.php文件中为我的应用程序设置了一个带有主要元素（#app）的Laravel / Vue应用程序。然后，我有一个app.js文件，可在其中启动我的Vue实例。然后是我的route.js和MyComponent.vue文件。

在MyComponnent.vue中，我正在尝试加载vue-winwheel。但我不断收到此警告：

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

该组件将无法加载。如果我直接在我的welcome.blade.php文件中使用它，则会加载，但是当然在错误的位置。

我确实在全球注册了VueWinwheel（测试了VueWinwheel和vue-winwheel）。有人对我想念的东西有什么想法吗？

app.js

import Vue from 'vue';
import Vuex from 'vuex'
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue'
import VueWinwheel from 'vue-winwheel/vue-winwheel'
import routes from './routes';

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(BootstrapVue);
Vue.use(VueWinwheel);

require('./bootstrap');

let app = new Vue({
	el: '#app',
	router: new VueRouter(routes),
	components: {
		VueWinwheel
	}
});

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="icon" type="image/png" href="{{ asset('images/FavIcon-64.png') }}" />
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">

        <title>My App with VueWinwheel</title>
    </head>
    <body>
        <div id="app" class="col-xs-12 text-center">
            <transition name="slideFade" mode="out-in">
                <router-view></router-view>
            </transition>
            <vue-winwheel /> <!-- This one does work -->
        </div>
        
        <script src="/js/app.js"></script>
    </body>
</html>

MyComponent.vue

<template>
	<section class="winwheel-section">
		<vue-winwheel /> <!-- This one does not work and makes the warning show in console -->
	</section>
</template>

<script>
	module.exports = {
		data: function(){
			return {
				
			}
		}
	}
</script>

router.js

import MyComponent	from './components/MyComponent';

export default{
	mode: 'history',

	routes: [
		{
			path: '/',
			component: MyComponent,
			name: 'MyComponent'
		}
	]
}

更新

我尝试了@AbdulAzeez Olanrewaju的建议（并尝试过）。但这在我的npm vue监视终端中给了我一个错误：

在<-> ../../../ node_modules / babel-loader / lib / index.js ?? ref--4-0中找不到
“导出'default'（导入为'mod'）！../../../ node_modules / vue-loader / lib / index.js ?? vue-loader-options！./ Spin.vue？vue＆type = script＆lang = js＆'

Answer 1

您可以尝试更改

let app = new Vue({
    el: '#app',
    router: new VueRouter(routes),
    components: {
        VueWinwheel
    }
});

到

let app = new Vue({
    el: '#app',
    router: new VueRouter(routes),
    components: {
        'vue-winwheel': VueWinwheel
    }
});

我也不认为您需要使用Vue.use（VueWinWheel）;

Answer 2

我找到了答案。

我无法将Winwheel导入MyComponent.vue内，因为我使用了module.exports。当我使用导出默认值时，它确实起作用。

所以：

<!-- This -->
<script>
	export default {
		data: function(){
			return {
				
			}
		}
	}
</script>

<!-- Instead of this -->
<script>
	module.exports = {
		data: function(){
			return {
				
			}
		}
	}
</script>

<!-- Note that I also remove the = after module.exports

Vue组件工作的主要Vue实例，但不在Vue路由器组件中

2 个答案: