Question

我想在我的laravel项目中使用vue，它不起作用，我安装了npm install，其中安装了vue，并且还安装了vue-template。这是我的index.blade.php。

@extends('layouts.app')
@section('content')
   <div id="app">
      <p> {{ product }} </p>
   </div>
@endsection
@section('scripts')
   <script>
      var app = new Vue({
              el: '#app',
              data:{ product: 'car' } })
   </script>
@endsection

这是我的package.json文件。

  "devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"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.6.4",
"vue-template-compiler": "2.6.4"
}

Answer 1

如果要使用laravel Frontend Scaffolding，则需要创建一个组件并运行npm进行编译。

例如创建一个组件并在resources/assets/app.js中要求它，然后在刀片中使用该组件。

已经有一个关于Laravel默认值的例子

ExampleComponent是您的默认示例

而不是：

@extends('layouts.app')
@section('content')
   <div id="app">
      <p> {{ product }} </p>
   </div>
@endsection
@section('scripts')
   <script>
      var app = new Vue({
              el: '#app',
              data:{ product: 'car' } })
   </script>
@endsection

您应该这样调用组件：

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

以及示例组件resources/js/components/ExampleComponent的一些更改：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        {{ product }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data () {
          return {
            product:'car'
          };
        }
    }
</script>

不要忘记运行npm run dev来编译新更改

第二种方式：

当然还有另一种方法

这样，您就不需要app.js或npm install

您可以直接调用Vuejs脚本

并使用@{{ product }}代替{{ product }}

Laravel 5.7中的Vue

1 个答案: