laravel 未捕获的类型错误：Vue.component 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42520992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Vue.component is not a function
提问by Stephen Pappas
In OS X with Laravel/Homestead, I'm getting an error using Vue (v2.2.1). The component won't load and the console error is "Uncaught TypeError: Vue.component is not a function".
在带有 Laravel/Homestead 的 OS X 中，我在使用 Vue (v2.2.1) 时遇到错误。组件不会加载，控制台错误是“Uncaught TypeError: Vue.component is not a function”。
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
What is throwing me off is that if I make a change to app.js, the webpack does not update to reflect any changes. So I need to A) fix the issue above, and B) figure out how to get the webpack to show updates in the console.
让我失望的是，如果我对 app.js 进行更改，webpack 不会更新以反映任何更改。所以我需要 A) 解决上面的问题，B) 弄清楚如何让 webpack 在控制台中显示更新。
Any help would be greatly appreciated! I'm a noob. Here is my code...
任何帮助将不胜感激！我是菜鸟。这是我的代码...
app.js file
app.js 文件
Vue.component('video-upload', require('./components/VideoUpload.vue'));
const app = new Vue({
el: 'body'
});
VideoUpload.vue
视频上传.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
上传.blade.php
@extends('layouts.app')
@section('content')
<video-upload></video-upload>
@endsection
package.json
包.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"
}
}
采纳答案by LaraFlow
1
1
Change your package.json
更改您的package.json
"laravel-elixir-vue-2": "^0.3.0"
And run
并运行
<!-- language: lang-js -->
npm install
OR
或者
2
2
npm install laravel-elixir-vue-2 --save-dev
And then
进而
Change your gulpfile.js like this
像这样改变你的 gulpfile.js
<!-- language: lang-js -->
var elixir = require('laravel-elixir')
require('laravel-elixir-vue-2');
