在Laravel中使用Vue组件

Question

我在Laravel Blade文件中使用Vue组件时遇到一些麻烦。Laravel 5.8默认带有Vue.js，我创建了一个组件并将其全局注册到bootstrap.js文件中。

现在，我正在尝试将一些道具从刀片视图传递给组件。这是整个刀片视图：

@extends('admin._base')

@section('title', 'Producers')

@section('sidebar')
    @parent
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <entity-table :header-props="tHeaders"></entity-table>
        </div>
    </div>
@stop
<script>
    export default {
        data() {
            return {
                tHeaders: ['first name', 'last name', 'email']
            };
        }
    }
</script>

我收到这些错误：

Uncaught SyntaxError: Unexpected token export

并且：

Property or method "tHeaders" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

如果我不尝试将任何道具传递给刀片服务器文件，则Vue组件可以在刀片文件中正常工作，但我无法使脚本部分正常工作。

编辑：

这是我的package.json档案：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.3.1",
        "axios": "^0.18",
        "babel-loader": "^8.0.5",
        "bootstrap": "^4.1.1",
        "bootstrap-v4-rtl": "^4.1.1-1",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.22",
        "webpack": "^4.29.0"
    }
}

我还有一个.babelrc包含以下内容的文件：

{ "presets": ["@babel/env"] }