将 VueJS 添加到 Laravel 但继续使用 Laravel 的路由器等

Posted 2023-02-23

【中文标题】将 VueJS 添加到 Laravel 但继续使用 Laravel 的路由器等

【英文标题】：Add VueJS to Laravel but continue using Laravel's router etc

【发布时间】：2019-02-20 01:13:33

【问题描述】：

我想将 VueJS 添加到我基于 Laravel 的多页面应用程序中。

嗯 - Vue 提供了很多，但我真的很想继续使用 Laravel 的路由机制，并且只添加 VueJS 来增强我的项目。

所以我的问题是：由于 Laravel 带有 app.js 包括一个基本的 Vue 脚手架，我将无法为不同的页面添加不同的行为：

resources/assets/js/app.js:

require('./bootstrap');

window.Vue = require('vue');


Vue.component('example-component', require('./components/ExampleComponent.vue'));

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

如果我为每个刀片视图添加新的.js 文件，我是对的吗？例如。 home.js、register.js 并将它们包含在我的视图中？

【参考方案1】：

编写 Vue 组件

默认情况下，新的 Laravel 应用程序包含一个 ExampleComponent.vue Vue 组件，位于 resources/assets/js/components 目录中。 ExampleComponent.vue 文件是单个文件 Vue 组件的示例，它在同一个文件中定义其 javascript 和 html 模板。 单个文件组件为构建 JavaScript 驱动的应用程序提供了一种非常方便的方法。示例组件已在您的 app.js 文件中注册：

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue')
);

要在您的应用程序中使用该组件，您可以将其放入您的 HTML 模板之一。例如，在运行 make:auth Artisan 命令来搭建应用程序的身份验证和注册屏幕后，您可以将组件放入 home.blade.php Blade 模板中：

@extends('layouts.app')

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

【讨论】：

但是如果我将所有组件添加到这个文件中，app.js 不是一个非常大的文件，即使我需要特定页面上的所有组件？

这也是可能的