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