Vue JS with vue-router not loaded vueified components

我正在开发一个Web应用程序，它使用vue-router作为带有Laravel 5后端的SPA。它使用.vue文件来运行通过laravel-elixir-vueify运行的应用程序组件，以创建所需的JavaScript。Vue JS with vue-router not loaded vueified components

我已经成功地设置了vue-router和Vue，并且可以加载与主Vue和Vue路由器实例相同的文件中定义的组件。

但是，当我尝试并要求包含在.vue文件中的组件时，问题出现了。尽管当我检查Vue实例时，browserify/vueify报告运行成功，但只有匿名组件片段由Vue开发工具显示在实例中，并且在router-view中没有标记。

有在控制台中没有错误，但它看起来好像外部元件没有被正确加载。是各种代码和文件的

实例如下：

gulpfile.js

... 
    mix.browserify('dashboard.js'); 
...

dashboardOverview.vue

<template> 
    <div> 
     <h1>Overview</h1> 
     <img src="//placehold.it/320x100" style="width: 100%; margin-bottom: 15px" alt="Pathway Visualisation" /> 
    </div> 
</template> 

<script> 

    export default {} 

</script>

凡dashboardOverview.vue位于resources\assets\js\components\dashboardOverview.vue。

主视图

@section('content') 
<div id="app"> 
    <h1>Welcome</h1> 
    <a v-link="{ path: '/activate' }">Activate</a>| 
    <a v-link="{ path: '/' }">Overview</a> 
    <router-view></router-view> 
</div> 
@endsection

这是通过下面的JavaScript补充：

var Vue = require('vue'); 
var VueRouter = require('vue-router'); 

Vue.use(VueRouter) 

/* Components */ 
var dashboardOverview = require('./components/dashboardOverview.vue'); 
var userSetup = require('./components/userSetup.vue'); 

var App = Vue.extend(); 

var router = new VueRouter() 
Vue.config.debug = true 

router.map({ 
    '*': { 
     component: Vue.extend({template: '<h4>404 Not found</h4>'}) 
    }, 
    '/': { 
     component: dashboardOverview 
    }, 
    '/activate': { 
     component: userSetup 
    } 
}) 

router.start(App, '#app')

凡dashboard.js位于resources\assets\js\dashboard.js。

来源

2016-03-12 Daniel Waghorn

思考答案，但对于初学者来说，片段实例会导致一系列奇怪的问题。你应该将组件封装在一个div中，总是为 – Jeff

Hi @Jeff，谢谢你的建议。尽管问题仍然存在，但我已将该组件包装在“div”中。 –

我建立了一个最小的测试项目，并成功实现了我的目标。

最终的结果是一些Node包有不兼容的版本，还有一些不需要的包。

我修剪的我packages.json文件，然后重新安装所需vue，vue-router和laravel-elixir-vueify包，以确保一切都以正确的依赖关系正确安装，它起便一直。

来源

2016-03-13 21:05:02

Vue JS with vue-router not loaded vueified components

回答

相关问题