Laravel 和 vue.js - 不渲染导入的组件

Question

我开始在 laravel 框架之上使用 vue.js。

但是我在渲染导入的组件时遇到了问题。

我的 app.js (主要入口点)

// app.js
var Vue = require('vue');
var Router = require('vue-router');

Vue.use(Router);

var router = new Router();

var ContractsOverview = Vue.extend({
    template: '<p>contract page</p>'
});

var ContractDetail = Vue.extend({
    template: '<p>detail page</p>'
});

import DashboardView from './app/components/DashboardView.vue';

router.map({
    '/dashboard': {
        component: DashboardView
    },
    '/contracts': {
        component: ContractsOverview
    },
    '/contracts/:id': {
        component: ContractDetail
    }
});

var App = Vue.extend({
});

router.redirect({
    '*': '/dashboard'
});

router.start(App, '#reminder-app');

这是我的仪表板组件(位于resources/assets/js/app/components/DashboardView.vue)

<template>
    <section class="content-header">
    <h1>
    Dashboard
    <small>Control panel</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <!-- .. some html -->
</section>
</template>

<script>
export default {}
</script>

在我的主布局中，我有一个带有 <router-view></router-view> 的普通 Blade 模板在一点标记。

最后，我使用 laravels elixir 和以下 gulpfile 构建我的 app.js:

var elixir = require('laravel-elixir');

elixir.config.js.browserify.transformers.push({
    name: 'vueify',
    options: {}
});

elixir(function(mix) {
    mix.less(['bootstrap.less', 'app.less']);

    mix.scripts([
        'admin-lte/plugins/jQuery/jQuery-2.1.4.min.js',
        'admin-lte/plugins/jQueryUI/jquery-ui-1.10.3.min.js',
        // some more scripts,
        'admin-lte/app.js',
        'admin-lte/pages/dashboard.js',
        'admin-lte/demo.js'

    ], 'public/js/ui.js');

    mix.browserify('app.js');
});

当我转到页面时，路由 /contracts和 contracts/:id模板按预期显示。但是当我去 /dashboard路线，我没有看到任何东西(除了布局)。

我错过了什么吗？我是否忘记导入或需要某些东西？

Answer 1

好吧，我至少花了 4 个小时才发现我的错误，但这只是某个地方的简单拼写错误。

但是如果你在虚拟机(homestead)中运行 gulp，你不会得到与在本地运行 gulp 相同的输出。在我的本地机器上，它告诉我出了什么问题。

此外，gulp watch 在 homestead 机器上不工作。