Laravel 如何在blade文件中使用Vue組件的示例代碼
更新時間：2020年06月28日 08:39:26 作者：神兵小將2016
這篇文章主要介紹了Laravel 如何在blade文件中使用Vue組件,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Laravel 如何在blade文件中使用Vue組件，具體代碼詳情請看下文：
1. 安裝laravel/ui依賴包
composer require laravel/ui
2.生成vue基本腳手架
php artisan ui react
系統(tǒng)還提供了非常便捷的auth腳手架,帶登錄注冊。
php artisan ui react --auth
3.組件位置
Vue組件ExampleComponent.vue將被放置在resources/js/components目錄中。ExampleComponent.vue文件是單個文件Vue組件的示例，該組件在同一文件中定義其JavaScript和HTML模板。單個文件組件為構(gòu)建JavaScript驅(qū)動的應(yīng)用程序提供了一種非常方便的方法。該示例組件已在您的app.js文件中注冊：
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default
);
4.在blade模版中使用
要在應(yīng)用程序中使用該組件，您可以將該組件放入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的根節(jié)點，而且把組件放到里面，才能生效?。。?/p>
總結(jié)
到此這篇關(guān)于Laravel 如何在blade文件中使用Vue組件的文章就介紹到這了,更多相關(guān)Laravel 使用Vue組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了在VUE style中使用data中的變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-06-06
這篇文章主要為大家介紹了Vue使用Prism實現(xiàn)頁面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了Vue異步組件處理路由組件加載狀態(tài)的解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue滑動吸頂及錨點定位的示例代碼,代碼簡單易懂，非常不錯對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
vue3在table里使用elementUI的form表單驗證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了key在Vue列表渲染時究竟起到了什么作用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-04-04
這篇文章主要介紹了Vue實現(xiàn)table上下移動功能,結(jié)合實例形式分析了vue.js針對table表格元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
​ vue-element-admin是一個純前端的框架，左側(cè)菜單是根據(jù)路由生成的。實際開發(fā)中經(jīng)常需要根據(jù)當前登陸人員的信息從后端獲取菜單進行展示，本文將詳細介紹如何實現(xiàn)該功能2021-04-04
這篇文章主要介紹了vue使用echarts畫組織結(jié)構(gòu)圖的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-02-02
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_發(fā)中，表格業(yè)務(wù)基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11