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

【问题标题】：Laravel & vue.js - not rendering imported componentLaravel 和 vue.js - 不渲染导入的组件
【发布时间】：2016-01-30 23:13:22
【问题描述】：

我开始在 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> 标签。

最后我用 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 路线时，我什么都看不到（除了布局）。

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

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

好的，我花了至少 4 个小时才找到我的错误，但这只是某个地方的一个简单的错字。

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

另外gulp watch 在宅基地机器上也不起作用。

【讨论】：