laravel 5.7 中的 Vue

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 }}