在Laravel中使用Vue组件

Question

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

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

@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"]
}

Answer 1

您不能将ES5 / ES6语法放在Laravel刀片文件中。

在laravel刀片文件中使用vuejs有两种解决方案：

1. 使用下面的纯浏览器javascript

   var app = new Vue({
      data: {
         tHeaders: ['first name', 'last name', 'email']
      }
   })

   确保您首先加载bootstrap.js文件的转换版本（通过laravel mix）。
2. 使用laravel/mix将es6 js文件转换为浏览器版本 阅读文档以获取更多信息：Laravel Mix