时间戳

首页 > 解决方案 > 将 VueJS 添加到 Laravel 但继续使用 Laravel 的路由器等

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

问题描述

我想将 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并将它们包括在我的观点中？

标签： laravelvue.js

解决方案

编写 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 刀片模板中：

@extends('layouts.app')

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

推荐阅读