Laravel 中的 VueJS 设置答案

【问题标题】：VueJS Setup in LaravelLaravel 中的 VueJS 设置
【发布时间】：2017-05-03 21:01:21
【问题描述】：

我安装了 VueJS2 以便在 laravel 中使用。从一个简单的测试设置开始，这是app.blade.php

<!DOCTYPE html>
<html>
<head>
    <script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MEDIFAKTOR - @yield('title') </title>
    <link rel="stylesheet" href="css/vendor.css" />
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>

  <!-- Wrapper-->
    <div id="wrapper">
        <!-- Navigation -->
        @include('layouts.navigation')
        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">
            <!-- Page wrapper -->
            @include('layouts.topnavbar')
            <!-- Main view  -->
            @yield('content')
            <!-- Footer -->
            @include('layouts.footer')
        </div>
        <!-- End page wrapper-->
    </div>
    <!-- End wrapper-->
<script src="js/app.js" type="text/javascript"></script>
  <script>
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
  </script>
  @section('scripts')
@show
</body>
</html>

这是我要显示的内容

index.blade.php

@extends('layouts.app')
@section('title', 'Main page')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center m-t-lg">
                            <h1>MEDIFAKTOR server</h1>
                        </div>
                        <div id="app">
                            <h1>{{message}}</h1>
                        </div>
                    </div>
                </div>
            </div>
@endsection

刷新时出现错误：

80e040fb5fff0b0cf766194784388a0cd255e6c9.php 行中的错误异常 10：使用未定义的常量消息 - 假定为“消息”（查看： /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)

这听起来像是 VueJS 无法识别。我是根据VueJS网站和laracasts.com安装的

我放错地方了吗？

Package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0"
  }
}

【问题讨论】：

{{message}} 没有为索引刀片定义...请发布加载索引刀片的控制器代码.....如果使用 @{{message}} 而不是 {{message}} vueJS 变量..... {{varibale}} 搜索 php 变量，但 @{{variable}} 搜索 JS variavle 我的意思是 VueJS

标签： laravel gulp vue.js

【解决方案1】：

尝试在您的索引刀片中使用 @{{message}} 而不是 {{message}}。因为您的消息不是 php 变量，而是它的 JS 框架变量。将 @ 符号放在变量之前。

【讨论】：

谢谢，现在内容没有被我在网站上看到的“{{message}}”所取代。所以变量没有填充内容。我有感觉 VUEJS 还是不识别？开发控制台显示此错误（索引）：96 Uncaught ReferenceError: Vue is not defined 但我在 app.blade.php 中插入了 CDN 链接
在应用程序的主 JS 文件中，您需要“从 'vue' 导入 Vue”，然后您的 JS 才能识别什么是“Vue”。是的，您有 CDN，但在 VueJS 中，您需要导入单个模块并在整个执行过程中可用。这是很好的资源learninglaravel.net/topics/vuejs，请访问链接并先进行研究。

【解决方案2】：

如果您在渲染 vuejs 的花括号 {{}} 时遇到问题。 @{{}} 应该可以解决问题或让事情变得更简单你可以考虑刀片的 @逐字 html 代码 {{vuejs_vars}} @endverbatim

刀片中的逐字标签确保它们之间的任何标签都不会被刀片引擎解析并按原样打印。

【讨论】：

【解决方案3】：

Vue 在 assets/bootstrap.js 中声明。所以，检查那里。如果它到位，也许在 Vue 实例上的 created 钩子上调试：

created: function () {
console.log('instance created')
}

尝试从那里调试。

【讨论】：

【解决方案4】：

如果您使用符号 @ 解决了问题，但仍然收到错误“未定义 Vue”，正如您在评论中所说，您的代码中有错字 - 您应该使用属性src，而不是 scr。所以 vue.min.js 的正确包含应该是这样的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>

另外，当你的 JS 代码在 vue.min.js 加载之前开始执行时，你可能会遇到问题，尝试对 vue JS 文件使用 onload 事件：

<script onload="vueIsReady()" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script type="text/javascript">
function vueIsReady(){
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
}
</script>

或者你可以使用 importScript 函数：https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement

// definition of the function importScript ...

// call function importScript with two parameters - script URL and onload handler function
importScript('https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js', function(){
    function vueIsReady(){
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
    }
});

【讨论】：