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>

在我的主布局中，我有一个普通的 blade 模板，其中一处带有 <router-view></router-view> 标签。

最后，我使用 laravels 长生不老药和以下 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 个小时才发现我的错误，但这只是某个地方的简单错字。

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

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

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

Laravel & vue.js - not rendering imported component

laravel

vue.js