在 Laravel 項目中編寫第一個 Vue 組件
小編:管理員 74閱讀 2022.08.19
和 CSS 框架一樣,Laravel 不強制你使用什么 JavaScript 客戶端框架,但是開箱對 Vue.js 提供了良好的支持,如果你更熟悉 React 的話,也可以將默認的腳手架代碼替換成 React,實現細節參考官方文檔。
學院擁抱的是 Vue.js 框架,所以后續前端相關教程都會基于 Vue.js 編寫,有關 Vue.js 的入門教程,可以閱讀官方文檔,值得一提的是,Vue.js 的作者尤雨溪是中國人,所以該框架從文檔角度對中文很友好,關于如何快速入門 Vue.js 框架,作者在知乎上也有建議的學習路線:https://zhuanlan.zhihu.com/p/23134551,可以說是很貼心了,大家遵循這個路線,相信很快可以入門 Vue.js 的開發。
既然已經有這么豐富的資源,關于 Vue.js 的介紹和使用,我這里就不贅述了,我們重點來介紹如何在 Laravel 中通過 Vue 組件構建前端頁面和功能。學習過 Vue.js 之后,你會知道通過 Vue Loader 我們可以在前端通過單文件組件的格式編寫 Vue 組件,然后注冊、引用,在 Laravel 中我們也是這么干的,這可以極大提高前端代碼的復用性、可讀性和可維護性,下面我們以 Laravel 默認的歡迎頁面為例,將其改為通過 Vue 組件來實現,希望可以幫助你快速入門如何在 Laravel 中編寫 Vue 組件。
首先我們在resources/js/components目錄下新增一個 Vue 組件文件WelcomeComponent.vue,初始化代碼如下:
<style scoped></style> <template> </template> <script> export default {} </script>復制
我們會將該組件的樣式代碼定義在<style>標簽中(指定lang="scss"可支持 Sass 語法),scoped表示這段 CSS 樣式代碼只對當前組件有效。
在<template>標簽中定義 HTML 模板代碼,以及在<script>中定義組件的 JavaScript 代碼以及導出模塊。
然后我們將默認歡迎視圖中的樣式和 HTML 代碼遷移過來,這樣,最終的WelcomeComponent.vue組件代碼看起來是這樣的:
<style scoped> html, body { background-color: #fff; color: #636b6f; font-family: 'Nunito', sans-serif; font-weight: 200; height: 100vh; margin: 0; } .full-height { height: 100vh; } .flex-center { align-items: center; display: flex; justify-content: center; } .position-ref { position: relative; } .top-right { position: absolute; right: 10px; top: 18px; } .content { text-align: center; } .title { font-size: 84px; } .links > a { color: #636b6f; padding: 0 25px; font-size: 12px; font-weight: 600; letter-spacing: .1rem; text-decoration: none; text-transform: uppercase; } .m-b-md { margin-bottom: 30px; } </style> <template> <div class="flex-center position-ref full-height"> <div class="top-right links"> <a href="/login">登錄</a> <a href="/register">注冊</a> </div> <div class="content"> <div class="title m-b-md"> Laravel </div> <div class="links"> <a >文檔</a> <a >視頻</a> <a >新聞</a> <a >Nova</a> <a >Forge</a> <a >GitHub</a> </div> </div> </div> </template> <script> export default {} </script>復制
注意,Vue 組件只支持 JavaScript 代碼,不支持 Blade 語法,所以我們將對應的語法和指令做了移除和更新處理。
然后我們在resources/js/app.js中全局注冊這個組件以便可以在視圖文件中應用:
... Vue.component('welcome-component', require('./components/WelcomeComponent.vue')); const app = new Vue({ el: '#app' });復制
我們通過Vue.component()方法全局注冊了welcome-component組件,第一個參數是組件名,第二個參數是引入組件文件的位置,這樣我們就可以在resources/views/welcome.blade.php視圖文件中通過組件名使用這個組件了,修改welcome.blade.php代碼如下:
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> <welcome-component></welcome-component> </div> <script src="{{ asset('js/app.js') }}"></script> </body> </html>復制
移除了之前的 CSS 代碼,將其改為通過編譯后的外部文件引入(Laravel Mix 會自動識別 Vue 組件中的 CSS 代碼并將其編譯到app.css文件中)。移除了之前的 HTML 代碼,將其改為通過welcome-component組件引入,并且將組件掛載到id="app"的div容器內,這是我們在app.js中定義的 Vue 容器,如果組件不掛載到這個容器將不會生效。最后我們引入了編譯后的app.js文件,完成 Vue 組件的掛載和渲染。
這樣,我們就將之前默認實現的歡迎頁面改寫為了通過 Vue 組件構建的頁面,在項目根目錄下運行npm run dev重新編譯前端資源(如果之前沒有運行過npm install的話,需要先運行這個命令):

編譯完成后,再次訪問應用首頁,就可以看到新的由 Vue 組件驅動的歡迎頁面:

如果你的 Chrome 瀏覽器安裝過 Vue DevTools 擴展,F12 就可以看到頁面包含了WelcomeComponent組件:

好了,我們已經完成了在 Laravel 中編寫第一個 Vue 組件,很簡單吧,有了 Vue 組件,以后前端開發和維護會更加高效,想要在 Laravel 中結合 Vue 構建更加復雜的前后端分離應用,可以閱讀學院提供的《基于 Laravel + Vue 構建 API 驅動的前后端分離應用系列》教程深入工程實踐。
(全文完)
相關推薦
- Vue3(二)工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能,網上資料也很多,這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等??梢院蜕弦黄腸nd方式做項目做一下對比。node.js,npm、cnpm、yarnnode.js執行 npm run serve ,…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…