Laravel Vue 是一種流行的 Web 開發框架,它將 Laravel 和 Vue.js 框架結合起來,幫助開發者更快速地開發優秀的 Web 應用程序。下面將介紹一個簡單的 Laravel Vue 例子。
首先,我們需要安裝 Laravel。可以通過 Composer 來安裝,具體命令如下所示:
composer create-project --prefer-dist laravel/laravel example-app
接下來,我們需要安裝 Laravel Mix。Laravel Mix 是一種構建工具,它可以幫我們更加方便地管理前端資源。可以通過下面的命令安裝 Laravel Mix 和 Vue.js:
npm install --save-dev laravel-mix vue vue-template-compiler
安裝完畢后,我們需要創建一個 Vue 組件。只需在 resources 目錄下創建 components 目錄,并在其中創建一個名為 ExampleComponent.vue 的文件。代碼如下所示:
<template> <div class="example"> Hello, Vue! </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
現在,我們需要在我們的 Laravel 應用程序中注冊這個組件。可以編輯 resources/js/app.js 文件,添加如下代碼:
import Vue from 'vue' import ExampleComponent from './components/ExampleComponent.vue' const app = new Vue({ el: '#app', components: { ExampleComponent } })
最后一步是將 JavaScript 文件編譯成 CSS 和 JavaScript。可以使用 Laravel Mix 來完成這個任務。只需在項目根目錄下運行下面的命令即可:
npm run dev
以上步驟完成后,你可以通過訪問 http://example-app.test/ 來查看你的 Vue 組件了。這就是一個簡單的 Laravel Vue 例子!
上一篇鼠標移入增加css