在使用Laravel/Homestead的OS X中,我在使用Vue(v2.2.1)时遇到了一个错误.组件不会加载,控制台错误为"Uncaught TypeError:Vue.component不是函数".
Full console error
Uncaught TypeError: Vue.component is not a function
at eval (eval at <anonymous> (app.js:321), <anonymous>:17:5)
at Object.<anonymous> (app.js:321)
at __webpack_require__ (app.js:20)
at app.js:64
at app.js:67
让我恼火的是,如果我改变了应用程序.js,该网页包不会更新以反映任何更改.所以我需要A)解决上述问题,B)找出如何让网页在控制台中显示更新.
任何帮助都将不胜感激!我是个笨蛋.这是我的密码...
app.js file
Vue.component('video-upload', require('./components/VideoUpload.vue'));
const app = new Vue({
el: 'body'
});
VideoUpload.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example</div>
<div class="panel-body">
This is an example
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
upload.blade.php
@extends('layouts.app')
@section('content')
<video-upload></video-upload>
@endsection
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"video.js": "^5.11.6",
"vue": "^2.2.1",
"vue-resource": "^0.9.3"
}
}