Vueify / VueRouter / Laravel - 未定义组件

Posted 2023-02-22

【中文标题】Vueify / VueRouter / Laravel - 未定义组件

【英文标题】：Vueify / VueRouter / Laravel - Component not defined

【发布时间】：2017-01-24 22:10:15

【问题描述】：

我正在构建一个相对简单的 laravel 应用程序，并想学习 Vue.js……这变成了一个超级令人沮丧的烂摊子……

无论如何，这就是问题所在。无论我做什么，我都会收到我的组件未定义的错误。

这就是我所拥有的......

Gulpfile

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

// Elixir Mixins.
elixir(function(mix) 
    mix.sass('app.scss');
    mix.browserify('main.js');
);

/resources/assets/js/main.js

   var Vue =  require('vue');
   var VueRouter = require('vue-router');
   Vue.use(VueRouter);
   import Form2016_1099_misc from './components/2016-1099-misc.vue';
   Vue.component('Form2016_1099_misc', Form2016_1099_misc);

在我的刀片文件中...

@section('content')
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use v-link directive for navigation. -->
      <a v-link=" path: '/recipient' ">Go to Recipient</a>
      <a v-link=" path: '/form/2016/1099-misc' ">Go to 1099</a>
    </p>
    <!-- route outlet -->
    <router-view></router-view>
  </div>
@endsection

@section('footer')
  <script src=" asset('/js/main.js') "></script>

  <script>
    // Define some components
    var RecipientForm = Vue.extend(
      template: '<p>This is the recipient form.</p>'
    );
    var App = Vue.extend();
    var router = new VueRouter();

    router.map(
      '/recipient': 
        component: RecipientForm
      ,

      '/form/2016/1099-misc': 
        component: Form2016_1099_misc
      ,
    );
    router.start(App, '#app');
  </script>
@endsection

/resources/assets/js/components/2016-1099-misc.vue

<template>
     msg 
</template>

<style>

</style>

<script>
    export default
        data()
            return
                msg: 'This is a test'
            
        
    
</script>

我运行 gulp，它运行成功。当我在浏览器中查看页面时，我收到错误消息

ReferenceError: Form2016_1099_misc is not defined

我确定我做错了很多事情。我是 Vue 的超级新手，我正在努力掌握它......

更新：

我已将刀片文件中的所有脚本代码移动到 main.js 文件中，现在 main.js 看起来像这样 -

var Vue =  require('vue');
var VueRouter = require('vue-router');
use(VueRouter);
import Form2016_1099_misc from './components/2016-1099-misc.vue';
Vue.component('Form2016_1099_misc', Form2016_1099_misc);

// Define some components
var RecipientForm = Vue.extend(
  template: '<p>This is the recipient form.</p>'
);

var App = Vue.extend();
var router = new VueRouter();

router.map(
  '/recipient': 
    component: RecipientForm
  ,

  '/form/2016/1099-misc': 
    component: Form2016_1099_misc
  ,


);

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

我现在收到错误消息

[Vue warn]: Failed to resolve directive: link (found in component: <router-app>)
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

【参考方案1】：

你需要向 Vue.js 注册组件。您是在告诉路由器在路由发生变化时构建组件视图，但 Vue 也需要了解组件。

导入组件后，尝试： Vue.component('Form2016_1099_misc', Form2016_1099_misc);

见：https://vuejs.org/guide/components.html#Registration

【讨论】：

我添加了 Vue.component('Form2016_1099_misc', Form2016_1099_misc);到我的 main.js 文件并再次运行 Gulp（在这里也更新了主帖）并且没有任何变化。当我在浏览器中加载页面时，我仍然得到相同的“Form2016_1099_misc is not defined”

【参考方案2】：

我显然加载了两次 Vue。一个来自 NPM，另一个来自 CDN。我删除了 CDN，现在它可以正常工作了...