如何将 vue js 文件代码与 laravel Blade 分开？答案

【问题标题】：How to separate vue js file code from laravel blade?如何将 vue js 文件代码与 laravel Blade 分开？
【发布时间】：2017-05-06 18:44:23
【问题描述】：

我目前正在开发 Laravel 5.3 和 Vue Js，我有以下应用程序结构。

resource/view/layouts/plane.blade.php（作为master.blade.php工作）
resource/view/layouts/dashboard.blade.php（用作 child.blade.php - 扩展平面）
resource/view/index.blade.php（当前刀片文件 - 扩展仪表板）

public/js/blog.js

plane.blade.php 代码

 <!DOCTYPE html>
     <html lang="en" class="no-js">
         <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
                <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
                <script type="text/javascript" src="/js/blog.js"></script>

          </head>
           <body>
                  @yield('body')
           </body>
     </html>

dashboard.blade.php 代码

 @extends('layouts.plane')

 @section('body')
        <div class="row" id="manage-vue">
            @yield('section')
       </div>

  @stop

index.blade.php 代码

 @extends('layouts.dashboard') 

 @section('page_heading','Blog')

 @section('section')



<div >

    @{{ message }}

</div>

@stop

blog.js 代码

    var myModel =  new Vue({
       el: '#manage-vue',
       data: {
           message: 'Hello Vue.js!'
       }
   });

使用这些单独的文件，我没有得到结果，因为它显示错误找不到元素：#app。

如果我将 category.js 代码放在 index.blade.php 文件中，我会得到正确的结果。

如何处理单独的文件？

【问题讨论】：

Laravel 现在带有 vue，所以使用默认设置可能更容易：npm install，然后使用 elixir 编译你的 js 资产

标签： laravel vue.js

【解决方案1】：

您必须在#app 元素之后插入blog.js 。

【讨论】：

对我不起作用。它没有显示错误，但也没有结果。
你把你的 vue.js 放在刀片模板的什么地方了？请在您的问题中包含该刀片模板的代码。
很明显，您没有在#manage-vue 之后移动blog.js...尝试将所有内容（vue.js 脚本和blog.js 文件）移动到#manage-vue 元素下方

【解决方案2】：

您必须使用template 而不是el，如下所示：

 var myModel =  new Vue({
       template: '#app',
       data: {
           message: 'Hello Vue.js!'
       }
   });

您必须在 HTML 中包含以下内容：

<script type="text/x-template" id="app">
  <div>
    ...
  </div>
</script>

【讨论】：