在 Laravel 項目中編寫第一個 Vue 組件

小編:管理員 48閱讀 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 驅動的前后端分離應用系列》教程深入工程實踐。

（全文完）

全國[切換]∨

首頁

找工作

找人才

找兼職

查企業

查工資

看趨勢

職場知識

百科

更多>

在 Laravel 項目中編寫第一個 Vue 組件

小編:管理員 48閱讀 2022.08.19

關聯標簽：

QQ客服

E-mail:market#hunt007.cn