Laravel UI 推出之前，其主要功能之一就是預支持defi晚上 Vue.js 從 Laravel v5.3 到 v6。 Vue 是用於構建用戶界面的現代 JavaScript 前端框架。
以下是使用 Laravel 和 Vue 為您的項目創建完整工作流的一些主要好處：
源代碼合併到一個項目中，而不是後端和前端單獨的項目
安裝配置簡單
一個發行版可以同時管理兩個框架
一 單頁申請 （簡稱SPA）從網絡服務器動態加載新數據到網頁中，而無需刷新整個頁面。
使用 SPA 的熱門網站示例包括 gmail.com 和 youtube.com——換句話說，SPA 在很大程度上無處不在。 您可能每天使用的大多數管理儀表板都是使用 SPA 構建的。
SPA的優勢：
用戶體驗更靈活
在瀏覽器中緩存數據
快速加載時間
SPA的缺點：
可能會損害 SEO（搜索引擎優化）
潛在的安全問題
消耗大量瀏覽器資源
這篇文章將演示如何開發一個允許用戶註冊帳戶和添加任務的待辦事項應用程序。
本教程使用 Laravel 9，需要 PHP 8.1 和 Vue 3； 我們還需要安裝 PHP 和 NGINX。
我們從以下命令開始：
composer create-project --prefer-dist laravel/laravel laravel-vue-combo接下來，我們將安裝 JavaScript 依賴項。
npm install在我們將 Vue 添加到我們的項目之前，我們需要安裝一些包。
此外，必須安裝 plugin-vue，因為 Laravel 9 附帶了 Vite，而不是 webpack-mix，後者是以前的 Laravel JavaScript 捆綁器。 讓我們現在就開始做吧：
npm install vue@next vue-loader@next @vitejs/plugin-vue打開名為的文件 vite.config.js 並添加 vue() 配置：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});編輯 Vue 3 應用程序的 app.js 文件和引導代碼片段：
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")創建一個名為 App.vue 並添加以下內容：
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>最後，打開文件 welcome.blade.php 位於文件夾中 resources/views 並添加以下內容：
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>要預覽我們的應用程序，我們需要在兩個不同的終端/命令行上啟動我們的 Vue 應用程序和 Laravel 服務器：
npm run dev
php artisan serve要創建我們的待辦事項應用程序，我們需要創建其他文件。 vue會創建多個頁面，主要有：
要與 Laravel 端點通信，我們需要安裝 Axios：
npm install axios使用包 vue-router，有多種路由策略可以在Vue中使用； 這些策略也被稱為 history models.
當用戶請求 route 比如 http://localhost:8000/home，它會在頁面刷新時返回 404 錯誤，我們可以依靠 Laravel 檢測任何回退路由，然後提供包含我們應用程序的 Blade 文件。
為此，我們將使用 HTML5 模式：
Route::get('/{vue_capture?}', function() {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');import {createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: () => import('./pages/Login.vue')
},
{
path: '/register',
component: () => import('./pages/Register.vue')
},
{
path: '/home',
component: () => import('./pages/Home.vue')
}
],
})在這個例子中，我們使用 Laravel 聖殿，然後將令牌保存在本地存儲中。
對於成功的其他請求，令牌被合併到標頭中，這將允許發出請求的用戶被 Laravel 識別。
以下是兩者的相關代碼塊：
<!--Login.vue-->
<template>
<div class="mx-auto w-4/12 mt-10 bg-blue-200 p-4 rounded-lg">
<div
class="bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-2 flex flex-col"
>
<h1 class="text-gray-600 py-5 font-bold text-3xl"> Login </h1>
<ul class="list-disc text-red-400" v-for="(value, index) in errors" :key="index" v-if="typeof errors === 'object'">
<li>{{value[0]}}</li>
</ul>
<p class="list-disc text-red-400" v-if="typeof errors === 'string'">{{errors}}</p>
<form method="post" @submit.prevent="handleLogin">
<div class="mb-4">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="username"
>
Email Address
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
id="username"
type="text"
v-model="form.email"
required
/>
</div>
<div class="mb-4">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="password"
>
Password
</label>
<input
class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
id="password"
type="password"
v-model="form.password"
required
/>
</div>
<div class="flex items-center justify-between">
<button
class="bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
type="submit"
>
Sign In
</button>
<router-link
class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
to="register"
>
Sign Up
</router-link>
</div>
</form>
</div>
</div>
</template>export default {
setup() {
const errors = ref()
const router = useRouter();
const form = reactive({
email: '',
password: '',
})
const handleLogin = async () => {
try {
const result = await axios.post('/api/auth/login', form)
if (result.status === 200 && result.data && result.data.token) {
localStorage.setItem('APP_DEMO_USER_TOKEN', result.data.token)
await router.push('home')
}
} catch (e) {
if(e && e.response.data && e.response.data.errors) {
errors.value = Object.values(e.response.data.errors)
} else {
errors.value = e.response.data.message || ""
}
}
}
return {
form,
errors,
handleLogin,
}
}
}Ercole Palmeri
你也可能對此有興趣 ...