Ìwé

Bii o ṣe le lo Laravel pẹlu Vue.js 3

Vue.js jẹ ọkan ninu awọn ilana JavaScript ti o lo julọ fun ṣiṣẹda awọn atọkun wẹẹbu ati awọn ohun elo oju-iwe ẹyọkan, papọ pẹlu Laravel o di ohun elo idagbasoke ti o lagbara pupọ.

Fun idagbasoke ohun elo wẹẹbu, ọpa ti a lo lọpọlọpọ jẹ vuejs, ati ninu nkan yii a yoo rii bii o ṣe le fi sii ati lo pẹlu Laravel. Vue.js ilana wà definite onitẹsiwaju ilana nitori pe o jẹ amọja ni ṣiṣẹda awọn iwo HTML, ati pe o fun ọ laaye lati ṣepọ ni irọrun pẹlu awọn paati ti awọn ile-ikawe ati awọn iṣẹ akanṣe miiran.

Awọn aseyori ti Vue.js ti wa ni tun sopọ si awọn wun ti Laravel lati daba bi ilana iwaju, nitorinaa o yori si itusilẹ ti ẹya 2.0.

Atọka akoonu

Laravel ise agbese ẹda

Igbesẹ akọkọ jẹ, dajudaju, lati ṣẹda iṣẹ akanṣe tuntun ni Laravel. Ti o ba ni ọkan lori kọnputa rẹ, lo tabi o le ṣẹda tuntun kan fun ikẹkọ yii.

composer create-project laravel/laravel guide-laravel-vue

Lẹhin ti ise agbese ti bere, iwọ yoo nilo lati fi sori ẹrọ ni npm awọn afẹsodi. Lati ṣe eyi, ṣiṣe aṣẹ wọnyi ninu itọsọna iṣẹ akanṣe rẹ:

npm install

Ni kete ti awọn igbẹkẹle ti fi sori ẹrọ, ṣiṣe aṣẹ atẹle lati ṣajọ awọn orisun ati rii daju pe ohun gbogbo n ṣiṣẹ gangan:

npm run dev

Ilana naa npm run dev ṣe kan lẹsẹsẹ ti sọwedowo ati akopo, ni pato Laravel Mix sakojo faili resources/js/app.js ati faili resources/css/app.css ninu awọn faili public/js/app.js e public/css/app.css.

Nigbati o ba pari ti ohun gbogbo ba ṣiṣẹ daradara, iwọ yoo rii nkan bii eyi:

Fifi Vue.js

Lẹhin ti ngbaradi iṣẹ akanṣe Laravel, a le tẹsiwaju lati fi sori ẹrọ Vue.js 3. Lati ṣe eyi, ṣiṣe aṣẹ wọnyi ni itọsọna iṣẹ akanṣe rẹ:

npm install --save-dev vue

Eyi yoo fi Vue.js sori ẹrọ bi ọkan ninu awọn igbẹkẹle idagbasoke rẹ. Ni kete ti o ti ṣajọ awọn orisun naa, faili JavaScript iṣelọpọ rẹ yoo jẹ ti ara ẹni, nitorinaa fi Vue.js sori ẹrọ bi igbẹkẹle idagbasoke.

Lati rii daju pe Vue 3 ti fi sori ẹrọ ni deede, ṣii faili naa package.json (bayi ni ise agbese root) ati search "vue" ninu apakan "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Bi o ti le ri, tọkasi awọn version nọmba ti Vue.js 3 ti fi sori ẹrọ.

Idanwo akọkọ ti Vue.js

Ninu faili welcome.blade.php rẹ fi koodu atẹle sii:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Bi o ti le rii, a ti ṣẹda nkan kan div con id "vue-app“. Inu awọn iwe afọwọkọ ano ti a ti da ohun apẹẹrẹ ti Vue, ibi ti a ti kọja awọn Constructor ohun ti o fun laaye wa lati. defisetumo diẹ ninu awọn paramita ti ohun elo, gẹgẹbi data ati awọn ihuwasi, ninu ọran wa:

el: tọka si ano div definited ninu html
data: datasetset

Ni kete ti nkan naa ti ṣẹda, Vue gba awọn div con id vue-app ati ki o gba itoju ti rirọpo awọn placeholder {{ text }} pẹlu iye ti o wa ninu nkan data. O han ni nkan yii le ni awọn ohun-ini diẹ sii ju ọkan lọ, paapaa ti awọn oriṣi oriṣiriṣi: awọn nọmba, awọn akojọpọ ati awọn nkan itẹ-ẹiyẹ miiran wulo

Ni afikun si rirọpo yii, Vue tun ti mu ẹrọ rẹ ṣiṣẹ o si jẹ ki ohun elo naa ṣe idahun, ie eyikeyi iyipada si ohun-ini ọrọ yoo fa imudojuiwọn lẹsẹkẹsẹ ti eroja ti o baamu ni HTML.

Keji igbeyewo ti Vue.js

Lati tẹsiwaju si idanwo keji, iwọ yoo kọkọ nilo lati ṣe imudara ohun elo naa lati ṣẹda paati tuntun kan. O ṣii resources/app.js (o resources/js/app.js) ati imudojuiwọn awọn akoonu rẹ bi atẹle:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Ninu faili yii a n ṣẹda apẹẹrẹ Vue.js tuntun kan, ati lati ṣe eyi a nilo paati Vue eyiti a pe ni HelloVue.vue. Fun alaye siwaju sii kan si alagbawo awọn osise iwe aṣẹ .

Ṣẹda titun faili resources/components/HelloVue.vue ki o si tẹ koodu atẹle sii:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

Awọn faili ti a kan da ni a ipilẹ Vue.js paati ti o tẹ jade Hello Vue! wá header1 loju iwe. Níkẹyìn, ṣii awọn webpack.mix.js faili ni gbongbo ise agbese ki o mu awọn akoonu rẹ ṣe bi atẹle:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Ninu faili yii, ọna ipe .vue() yoo sakojo eyikeyi Vue.js koodu ati ki o lapapo o sinu isejade JavaScript faili. Iṣẹ naa gba ohun kan nibiti o le definite version of Vue.js o ti wa ni lilo.

Lẹhin iyipada faili naa webpack.mix.js o nilo lati ṣajọ koodu JavaScript. Lati ṣe eyi, a tun ṣiṣẹ aṣẹ naa lẹẹkansi npm run dev.

Nikẹhin, lati ṣe idanwo Vue ṣiṣẹ, ṣii faili naa resources/views/welcome.blade.php ki o si tẹ koodu atẹle sii:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

Koodu naa, papọ pẹlu paati ti a ṣẹda tẹlẹ, yoo ṣe agbejade ọrọ kan loju iboju Hello Vue!, Bi awọn kan abajade ti Vue.js apẹẹrẹ ti wa ni agesin lori HTML ano pẹlu id app.

Ṣiṣe ohun elo rẹ nipa lilo php artisan serve, ati ṣii ni ẹrọ aṣawakiri ayanfẹ rẹ.

Ercole Palmeri

O tun le nifẹ si ...