ווי צו נוצן Laravel מיט Vue.js 3

Vue.js איז איינער פון די מערסט געוויינט דזשאַוואַסקריפּט פראַמעוואָרקס פֿאַר קריייטינג וועב ינטערפייסיז און איין בלאַט אַפּלאַקיישאַנז, צוזאַמען מיט Laravel עס ווערט אַ זייער שטאַרק אַנטוויקלונג געצייַג.

פֿאַר דער אַנטוויקלונג פון וועב אַפּפּס, אַ וויידלי געוויינט געצייַג איז vuejs, און אין דעם אַרטיקל מיר וועלן זען ווי צו ינסטאַלירן און נוצן עס מיט Laravel. די Vue.js פריימווערק איז געווען defiניטאָ פּראָגרעסיוו פריימווערק ווייַל עס איז ספּעשאַלייזד אין דער שאַפונג פון HTML קוקן, און אַלאַוז איר צו לייכט ויסשטימען מיט קאַמפּאָונאַנץ פון אנדערע לייברעריז און פּראַדזשעקס.

די הצלחה פון Vue.js איז אויך רעכט צו דער ברירה פון Laravel צו פֿאָרשלאָגן עס ווי אַ פראָנטענד פריימווערק, אַזוי לידינג צו די מעלדונג פון ווערסיע 2.0.

שאַפונג פון לאַראַוועל פּרויעקט

דער ערשטער שריט איז, פון קורס, צו שאַפֿן אַ נייַע פּרויעקט אין לאַראַוועל. אויב איר האָט איין אויף דיין קאָמפּיוטער, נוצן עס אָדער איר קענען מאַכן אַ נייַע נאָר פֿאַר דעם טוטאָריאַל.

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

נאָך די פּרויעקט איז סטאַרטעד, איר דאַרפֿן צו ינסטאַלירן די npm אַדיקשאַנז. צו טאָן דאָס, לויפן די פאלגענדע באַפֿעל אין דיין פּרויעקט וועגווייַזער:

npm install

אַמאָל די דיפּענדאַנסיז זענען אינסטאַלירן, לויפן די פאלגענדע באַפֿעל צו בויען די רעסורסן און מאַכן זיכער אַז אַלץ טאַקע אַרבעט:

npm run dev

דער באַפֿעל npm run dev פּערפאָרמז אַ פאַרשיידנקייַט פון טשעקס און בויען, ספּעציעל Laravel Mix צונויפנעמען די טעקע resources/js/app.js און די טעקע resources/css/app.css אין טעקעס public/js/app.js e public/css/app.css.

ווען פאַרטיק אויב אַלץ אַרבעט גוט, איר וועט זען עפּעס ווי דאָס:

ינסטאָלינג Vue.js

נאָך פּריפּערינג די לאַראַוועל פּרויעקט, מיר קענען גיינ ווייַטער צו ינסטאַלירן Vue.js 3. צו טאָן דאָס, לויפן די פאלגענדע באַפֿעל אין דיין פּרויעקט וועגווייַזער:

npm install --save-dev vue

דאָס וועט ינסטאַלירן Vue.js ווי איינער פון די אַנטוויקלונג דיפּענדאַנסיז. נאָך קאַמפּיילינג די אַסעץ, דיין פּראָדוקציע דזשאַוואַסקריפּט טעקע וועט זיין זיך-קאַנטיינד, אַזוי איר נאָר דאַרפֿן צו ינסטאַלירן Vue.js ווי אַ אַנטוויקלונג דעפּענדענסי.

צו מאַכן זיכער אַז Vue 3 איז אינסטאַלירן ריכטיק, עפֿענען די טעקע package.json (פאָרשטעלן אין פּרויעקט וואָרצל) און זוכן פֿאַר "vue" אין די אָפּטיילונג "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"
    }
}

ווי איר קענען זען, די ווערסיע נומער ינדיקייץ אַז Vue.js 3 איז אינסטאַלירן. 

ערשטער פּרוּווט פון Vue.js

אין דיין welcome.blade.php טעקע שטעלן די פאלגענדע קאָד:

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

ווי איר קענען זען, מיר האָבן באשאפן אַן עלעמענט div מיט id "vue-app". ין די שריפט עלעמענט מיר האָבן באשאפן אַ בייַשפּיל פון Vue, ווו מיר פאָרן צו די קאָנסטרוקטאָר אַ כייפעץ וואָס אַלאַוז אונדז צו defiניט עטלעכע אַפּלאַקיישאַן פּאַראַמעטערס, אַזאַ ווי דאַטן און ביכייוויערז, אין אונדזער פאַל:

• el: רעפערענץ צו דעם עלעמענט div defiפאַרטיק אין HTML
• דאַטע: דאַטאַסעט

ווי באַלד ווי די כייפעץ איז באשאפן, Vue קונה די div מיט id vue-app און נעמט זאָרגן פון ריפּלייסינג די אָרטהאָלדער {{ text }} מיט די ווערט קאַנטיינד אין די דאַטן כייפעץ. פון קורס, דעם כייפעץ קענען אַנטהאַלטן מער ווי איין פאַרמאָג, אפילו פון פאַרשידענע טייפּס: נומערן, ערייז און אנדערע נעסטעד אַבדזשעקץ זענען גילטיק

אַחוץ דעם פאַרבייַט, Vue האט אויך אַקטיווייטיד זיין מאָטאָר און געמאכט די אַפּלאַקיישאַן אָפּרופיק, ד"ה יעדער ענדערונג אין די טעקסט פאַרמאָג וועט פאַרשאַפן אַ רעגע דערהייַנטיקן פון די קאָראַספּאַנדינג עלעמענט אין HTML.

צווייטע פּראָבע פון ​​Vue.js

צו גיינ ווייַטער צו די רגע פּראָצעס, איר וועט ערשטער דאַרפֿן צו ינסטאַנטייט די אַפּ צו שאַפֿן אַ נייַע קאָמפּאָנענט. איר עפענען resources/app.js (o resources/js/app.js) און דערהייַנטיקן זייַן אינהאַלט ווי גייט:

// resources/app.js

require('./bootstrap');

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

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

אין דעם טעקע מיר שאַפֿן אַ נייַע Vue.js בייַשפּיל, און צו טאָן דאָס, מיר דאַרפֿן אַ Vue קאָמפּאָנענט וואָס מיר האָבן גערופֿן HelloVue.vue. פֿאַר מער אינפֿאָרמאַציע באַראַטנ זיך די באַאַמטער דאָקומענטן . 

שאַפֿן אַ נייַע טעקע resources/components/HelloVue.vue און אַרייַן די פאלגענדע קאָד:

// resources/components/HelloVue.vue

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

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

דער טעקע מיר נאָר באשאפן איז אַ יקערדיק Vue.js קאָמפּאָנענט וואָס פּרינץ Hello Vue! קומען header1 אויף די בלאַט. צום סוף, עפענען די webpack.mix.js טעקע אין די פּרויעקט וואָרצל און דערהייַנטיקן זייַן אינהאַלט ווי גייט:

// 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', [
        //
    ]);

אין דעם טעקע, דער אופֿן רופן .vue() וועט צונויפנעמען קיין Vue.js קאָד און פּעקל עס אין די פּראָדוקציע דזשאַוואַסקריפּט טעקע. די פֿונקציע אַקסעפּץ אַ כייפעץ ווו איר קענען defiפאַרענדיקן די ווערסיע פון ​​Vue.js איר נוצן. 

נאָך עדיטינג די טעקע webpack.mix.js איר דאַרפֿן צו זאַמלען די דזשאַוואַסקריפּט קאָד. צו טאָן דאָס, מיר לויפן די באַפֿעל ווידער npm run dev.

צום סוף, צו פּרובירן Vue אַפּעריישאַנאַל, עפֿענען די טעקע resources/views/welcome.blade.php און אַרייַן די פאלגענדע קאָד:

<!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>

דער קאָד, צוזאַמען מיט די פריער באשאפן קאָמפּאָנענט, וועט פּראָדוצירן אַ ווידעא אָנזאָג העלא וויו!, רעכט צו דער Vue.js בייַשפּיל איז מאָונטעד אויף אַ HTML עלעמענט מיט id app.

לויפן דיין אַפּלאַקיישאַן ניצן php artisan serve, און עפֿענען עס אין דיין באַליבסטע בלעטערער.

Ercole Palmeri

איר קען אויך זיין אינטערעסירט אין ...

• סערוויס פּראַוויידערז אין לאַראַוועל: וואָס זיי זענען און ווי צו נוצן סערוויס פּראַוויידערז אין לאַראַוועל
• ווי צו ינסטאַלירן ChatGPT לאָוקאַלי אויף דיין קאָמפּיוטער
• ווי צו קאַסטאַמייז דרוקן דרוק פון גאַנטט אין Microsoft Project
• וואָס איז אַ פריימווערק אין ווייכווארג אינזשעניריע, defiדעפֿיניציע און טייפּס פון פראַמעוואָרקס
• דאָ קומט דער ערשטער דיגיטאַל וועט מיט blockchain