Ինչպես օգտագործել Laravel-ը Vue.js 3-ի հետ

Vue.js-ը JavaScript-ի ամենաօգտագործվող շրջանակներից մեկն է վեբ ինտերֆեյսներ և մեկ էջի հավելվածներ ստեղծելու համար, Laravel-ի հետ միասին այն դառնում է զարգացման շատ հզոր գործիք:

Վեբ հավելվածների մշակման համար լայնորեն կիրառվող գործիք է vuejs-ը, և այս հոդվածում մենք կտեսնենք, թե ինչպես տեղադրել և օգտագործել այն Laravel-ի հետ։ Vue.js շրջանակն էր defiնիտո առաջադեմ շրջանակ քանի որ այն մասնագիտացված է HTML դիտումների ստեղծման մեջ և թույլ է տալիս հեշտությամբ ինտեգրվել այլ գրադարանների և նախագծերի բաղադրիչներին:

Vue.js-ի հաջողությունը պայմանավորված է նաև ընտրությամբ Լարավել առաջարկել այն որպես ճակատային շրջանակ, այդպիսով հանգեցնելով 2.0 տարբերակի թողարկմանը:

Laravel նախագծի ստեղծում

Առաջին քայլը, իհարկե, Laravel-ում նոր նախագիծ ստեղծելն է: Եթե ​​ձեր համակարգչում ունեք մեկը, օգտագործեք այն կամ կարող եք նորը ստեղծել հենց այս ձեռնարկի համար:

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-ի տեղադրում

Laravel նախագիծը պատրաստելուց հետո մենք կարող ենք անցնել Vue.js 3-ի տեղադրմանը: Դա անելու համար ձեր նախագծի գրացուցակում գործարկեք հետևյալ հրամանը.

npm install --save-dev vue

Սա կտեղադրի Vue.js-ը որպես զարգացման կախվածություններից մեկը: Ակտիվները կազմելուց հետո ձեր արտադրական JavaScript ֆայլը կլինի ինքնուրույն, այնպես որ դուք պարզապես պետք է տեղադրեք 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-ի ցանկացած կոդ և այն կհամալրի արտադրական JavaScript ֆայլում: Ֆունկցիան ընդունում է օբյեկտ, որտեղ դուք կարող եք defiնշեք Vue.js-ի այն տարբերակը, որն օգտագործում եք: 

Ֆայլը խմբագրելուց հետո webpack.mix.js դուք պետք է կազմեք javascript կոդը: Դա անելու համար մենք նորից գործարկում ենք հրամանը 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!, քանի որ Vue.js օրինակը տեղադրված է HTML տարրի վրա id app.

Գործարկեք ձեր հավելվածը՝ օգտագործելով php artisan serveև բացեք այն ձեր սիրած բրաուզերում:

Ercole Palmeri

Ձեզ կարող է հետաքրքրել նաև ...

• Ծառայությունների մատակարարները Laravel-ում. ինչ են նրանք և ինչպես օգտագործել Ծառայությունների մատակարարները Laravel-ում
• Ինչպես տեղադրել ChatGPT-ը ձեր համակարգչում տեղական մակարդակում
• Ինչպես անհատականացնել Gantt նախագծի տպագրությունը Microsoft Project- ում
• Ինչ է շրջանակը ծրագրային ապահովման ճարտարագիտության մեջ, defiշրջանակների սահմանումը և տեսակները
• Ահա առաջին թվային կամքը blockchain