Ngaphambi kokusungulwa kweLaravel UI, enye yeempawu zayo eziphambili yayiyinkxaso yangaphambilidefinite for Vue.js ukusuka Laravel v5.3 ukuya v6. I-Vue yinkqubo yesikhokelo yeJavaScript yanamhlanje esetyenziselwa ukwakha ujongano lomsebenzisi.
Nazi ezinye zezona zibonelelo ziphambili zokusebenzisa iLaravel ngeVue ukwenza ukuhamba komsebenzi okupheleleyo kwiiprojekthi zakho:
Ikhowudi yomthombo idibaniswe kwiprojekthi enye, endaweni yokuba neeprojekthi ezihlukeneyo ze-backend kunye ne-frontend
Ukufakela kunye noqwalaselo kulula
Ukuhanjiswa okukodwa kunokulawula zombini izikhokelo kunye
Omnye usetyenziso lwephepha elinye (i-SPA ngokufutshane) ilayisha ngamandla idatha entsha ukusuka kumncedisi wewebhu ukuya kwiphepha lewebhu ngaphandle kokuhlaziya lonke iphepha.
Imizekelo yeewebhusayithi ezidumileyo ezisebenzisa i-SPA zibandakanya i-gmail.com kunye ne-youtube.com - ngamanye amazwi, ii-SPAs zikho yonke indawo. Uninzi lweedeshibhodi zolawulo onokusebenza nazo mihla le zakhiwe kusetyenziswa i-SPA.
Izinto eziluncedo kwii-SPAs:
Amava omsebenzisi abhetyebhetye ngakumbi
I-Cache data kwi-browser
Ixesha lokulayisha ngokukhawuleza
Izinto ezingeloncedo kwii-SPAs:
Ngamana ibeka esichengeni i-SEO (usetyenziso lwe-injini yokukhangela)
Imiba yokhuseleko enokwenzeka
Isebenzisa izixhobo ezininzi zebrawuza
Esi sithuba siya kubonisa indlela yokuphuhlisa i-app yokwenza evumela abasebenzisi ukuba babhalisele i-akhawunti kwaye bongeze imisebenzi.
Kule tutorial, iLaravel 9 isetyenzisiwe, efuna i-PHP 8.1 kunye ne-Vue 3; kufuneka kwakhona sibe ne-PHP kunye ne-NGINX efakwe.
Siqala ngalo myalelo ulandelayo:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboOkulandelayo, siya kufaka ukuxhomekeka kweJavaScript.
npm installKufuneka sifake ezinye iipakethi ngaphambi kokuba songeze i-Vue kwiprojekthi yethu.
Kwakhona, i-plugin-vue kufuneka ifakwe, ekubeni iLaravel 9 iinqanawa kunye neVite, kunokuba i-webpack-mix, eyayiyi-Laravel bundler yangaphambili yeJavaScript. Masiyenze ngoku:
npm install vue@next vue-loader@next @vitejs/plugin-vueVula ifayile ebizwa vite.config.js kwaye wongeze vue() kuqwalaselo:
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',
]),
],
});Hlela ifayile ye-app.js kunye ne-bootstrap snippet ye-Vue 3 app:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Yenza ifayile ebizwa App.vue kwaye wongeze oku kulandelayo:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Ekugqibeleni, vula ifayile welcome.blade.php ibekwe kwisiqulathi seefayili resources/views kwaye wongeze oku kulandelayo:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Ukujonga usetyenziso lwethu, kufuneka siqale usetyenziso lwethu lweVue kunye neseva yeLaravel kwiitheminali ezimbini ezahlukeneyo / imigca yomyalelo:
npm run dev
php artisan serveUkwenza i-app yethu yokwenza, kufuneka senze ezinye iifayile. I-Vue izakwenza amaphepha amaninzi, ikakhulu:
Ukunxibelelana neesiphelo zeLaravel, kufuneka sifake i-Axios:
npm install axiosUkusebenzisa ipakethe vue-router, kukho iindlela ezahlukeneyo zobuchule ezinokuthi zisetyenziswe kwiVue; ezi zicwangciso zikwabizwa ngokuba history models.
Xa umsebenzisi ecela route njenge-http: // localhost: 8000/home, eya kubuyisela impazamo ye-404 xa iphepha lihlaziywa, sinokuthembela kuLaravel ukubona nayiphi na indlela yokubuyela umva kwaye emva koko sikhonze ifayile yeBlade equlethe i-app yethu.
Ngesi sizathu, siza kusebenzisa imowudi ye-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')
}
],
})Kulo mzekelo siphatha ukuqinisekiswa kusetyenziswa ILaravel Sanctum, ngoko uphawu lugcinwa kwindawo yokugcina indawo.
Ukuze ezinye izicelo ziphumelele, ithokheni idibaniswe kwintloko, eya kuvumela umsebenzisi owenza isicelo ukuba achongwe nguLaravel.
Nazi iibhloko zekhowudi ezinxulumene nazo zombini:
<!--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
Unokuba nomdla kwi ...
I-CMA yase-UK ikhuphe isilumkiso malunga nokuziphatha kweBig Tech kwimarike yobukrelekrele bokwenziwa. Pha…
Umthetho we "Green Houses", oqulunqwe yiManyano yaseYurophu ukomeleza amandla ombane kwizakhiwo, ugqibezele inkqubo yowiso mthetho nge…
Ingxelo yonyaka yeCasaleggio Associati malunga ne-Ecommerce e-Italiya yanikezelwa. Ingxelo enesihloko esithi "AI-Commerce: imida yorhwebo nge-Artificial Intelligence".…
Isiphumo sokuyila rhoqo kobuchwepheshe kunye nokuzinikela kokusingqongileyo kunye nempilo yabantu. IBandalux inikezela ngeAirpure®, intente…