Vuejs js 用于多页，而不是单页应用答案

【问题标题】：Vuejs js for multiple pages, not for a single page applicationVuejs js 用于多页，而不是单页应用
【发布时间】：2017-05-23 05:43:29
【问题描述】：

我需要使用 laravel 5.3 和 vuejs 2 构建应用程序，因为我需要使用双向绑定而不是使用 jquery。

我需要使用刀片模板设置视图。然后，我需要在每个页面中使用 vuejs，如下所述。

resources/asserts/js/components/List.vue

<script>
    const panel = new Vue({
        el: '#list-panel',
        name: 'list',
        data: {               
           message: 'Test message'
        },
        methods: {
            setMessage: function(){
                this.message = 'New message';
            }
        }
   })
</script>

resources/asserts/views/post/index.blade.php

<div id="panel" class="panel panel-default">
    <div class="panel-heading">Posts</div>

    <div class="panel-body">
       <p>{{ message }}</p>
       <button v-on:click="setMessage">SET</button>
    </div>
</div>

有 Add.vue 到 create.blade.php 等等... 在 Add.vue el: '#add-panel'

这是我的 app.js。我已经将默认代码注释如下。

Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));

// const app = new Vue({
//     el: '#app'
// });

我几乎没有检查过大多数文档和教程。但他们使用单个 js 文件。他们将组件用于带有模板的小元素，而不仅仅是 js。

可以这样使用 vuejs 吗？我需要使用 app.js。最好的方法是什么？

【问题讨论】：

我不太确定您的问题，但这并不意味着只使用 vue 创建单页应用程序。默认情况下，您甚至没有获得 vue 路由器。我建议在刀片布局文件中简单地定义一个内联组件（通常是“主”组件）。您将 vue 注册到外部元素（body 或#app）。所有其他组件都像您使用 Vue.component 所做的那样简单地添加。然后，您可以定义刀片模板并简单地使用 vue 里面的所有内容。

标签： laravel vue.js laravel-5.3 vue-component vuejs2

【解决方案1】：

如果你想在你的刀片文件中添加一些 vuejs，你基本上有两个选择：

选项 #1

声明全局 Vue 组件

示例

// in laravel built in app.js file

Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));

const app = new Vue({
    el: '#app'
});

创建一个主布局文件，其中根 div 的 id 为 #app

// layout.blade.php

<html>
  <header></header>
  <body>
    <div id="app">
      @yield('content')
    </div>
  </body>
</html>

终于在你看来：

//some-view.blade.php

@extends('layout')

@section('content')
 <foo :prop="{{ $someVarFromController }}"></foo>
@endsection

选项 #2

这是我目前正在使用的，实际上给了我更多的灵活性

// in laravel built in app.js file

const app = new Vue({
    el: '#app',
    components: {
      Foo: require('./components/Foo.vue'),
      Bar: require('./components/Bar.vue')
    }
});

在布局文件中你将使用 vuejs 动态组件

<html>
  <header></header>
  <body>
    <div id="app">
      @if (isset($component))
        <component :is={{ $component }} inline-template>
      @endif

         @yield('content')

     @if (isset($component))
       </component>
     @endif
    </div>
  </body>
</html>

在你看来：

//some-view.blade.php

@extends('layout', ['component' => 'foo'])

@section('content')
   // all the vue stuff available in blade
   // don't forget to use the @ symbol every time you don't want blade to parse the expression.
  // Example: @{{ some.vue.propertie }}
@endsection

最后你可以像往常一样创建 vue 组件

// resources/assets/js/components/foo.vue

<script>
export default {
 // the component
}
</script>

【讨论】：

选项 2 似乎是一种有趣的方法.. 特别适用于多页应用程序。但是，我担心的是，如果我的应用程序中有 50 个组件，即使我不需要它们，我最终也会在 app.js 中加载所有这些组件......我试图找到一些可以在组件可以加载的地方更加动态的东西需求
要解决这个问题，您可以像这样以异步方式声明组件：Vue.component('my-component', () => import('./my-component'))。在以下位置查看更多详细信息：vuejs.org/v2/guide/components.html#Async-Components
在这种情况下 SEO 怎么样？
我们是否需要在文件中使用 VueJS 的路由声明，即 router.js 并将其导入到 app.js 中，就像我们在 SPA（单页应用程序）中所做的那样？
关于选项 2：@extends('layout', ['component' => 'foo']) - Laravel 刀片如何在此处获取 foo 变量？

【解决方案2】：

为单独的 JS 文件中的每个页面创建“应用程序”。良好的做法是使用与页面名称相同的名称以明确其所属的位置。
将主 div 命名为与文件相同的名称 (fileName.php + assets/js/fileName.js)。
使用#fileName' as yourel`
在 Blade 中使用 @{{ vue expressions }} 让 Blade 跳过这个并允许 VueJS 处理。

完成。祝你好运！

【讨论】：

您实际上是在为每个页面创建一个新的 Vue 实例。对吗？
@Pyol7 是的，这就是他所描述的。
那么app.js 文件将包含什么？你能用一个包含文件的文件夹结构来详细说明它吗？
你能用相关主题回答这个问题吗：stackoverflow.com/questions/59289548/…？
请注意这不是最佳实践，您会遇到问题，因为这将为每个页面创建一个新的 vue 实例。使用此设置，您将无法正确使用 vuex 存储，因为存储无法跨 vue 实例共享。