我正在构建一个相对简单的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.
答案 0 :(得分:0)
您需要使用Vue注册该组件。您告诉路由器在路由更改时构建组件视图,但Vue还需要了解该组件。
导入组件后,请尝试:
Vue.component('Form2016_1099_misc', Form2016_1099_misc);
答案 1 :(得分:0)
我显然是在两次加载Vue。一次来自NPM,另一次来自CDN。我删除了CDN,现在它工作正常......