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>标记。

最后，我使用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个小时找到我的错误，但这只是一个简单的错字。

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

同样gulp watch在家用机器上不起作用。

Laravel＆amp; vue.js - 不渲染导入的组件

1 个答案: