Laravel 如何在 blade 文件中使用 Vue 组件
1. 安装 laravel/ui 依赖包
composer require laravel/ui
2. 生成 vue 基本脚手架
php artisan ui react
系统还提供了非常便捷的 auth 脚手架, 带登录注册。
php artisan ui react --auth
3. 组件位置
Vue 组件 ExampleComponent.vue 将被放置在 resources/js/components 目录中。ExampleComponent.vue 文件是单个文件 Vue 组件的示例,该组件在同一文件中定义其 JavaScript 和 HTML 模板。单个文件组件为构建 JavaScript 驱动的应用程序提供了一种非常方便的方法。该示例组件已在您的 app.js 文件中注册:
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default
);
4. 在 blade 模版中使用
要在应用程序中使用该组件,您可以将该组件放入 Blade 模板 xxx.blade.php 中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
<link rel="stylesheet" href="{{mix('/css/app.css')}}">
</head>
<body>
<divid="app">
<example-component></example-component>
</divid=>
<script src="{{mix('/js/app.js')}}"></script>
</body>
</html>
注意:在 blade 文件中一定要有 id 为 app 的根节点,而且把组件放到里面,才能生效!!!
转自:https://www.wjcms.net/archive…
本文由博客一文多发平台 OpenWrite 发布!