Vue.js 3 көмегімен Laravel қалай пайдалануға болады

Vue.js веб-интерфейстерді және бір беттік қосымшаларды жасау үшін ең көп пайдаланылатын JavaScript фреймворктарының бірі болып табылады, ол Laravel-пен бірге өте қуатты әзірлеу құралына айналады.

Веб-қосымшаларды әзірлеу үшін кеңінен қолданылатын құрал vuejs болып табылады және осы мақалада біз оны Laravel көмегімен орнату және пайдалану жолын көреміз. Vue.js негізі болды defiнито прогрессивті шеңбер себебі ол HTML көріністерін құруға маманданған және басқа кітапханалар мен жобалардың құрамдас бөліктерімен оңай біріктіруге мүмкіндік береді.

Vue.js жетістігі де таңдауына байланысты Laravel оны 2.0 нұсқасының шығарылымына әкелетін алдыңғы жақтау ретінде ұсыну.

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 Con id «vue-app«. Сценарий элементінің ішінде біз Vue данасын жасадық, онда конструкторға бізге мүмкіндік беретін нысанды береміз. defiдеректер және мінез-құлық сияқты кейбір қолданба параметрлерін біздің жағдайда:

• el: элементке сілтеме div defihtml-де аяқталды
• күні: деректер жинағы

Нысан жасалғаннан кейін бірден Vue иемденеді div Con 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 данасын жасап жатырмыз және бұл үшін бізге HelloVue.vue деп аталатын 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

Сізді қызықтыруы мүмкін ...

• Ларавелдегі қызмет жеткізушілері: олар дегеніміз не және Ларавелдегі қызмет жеткізушілерін қалай пайдалану керек
• ChatGPT-ті компьютерге жергілікті түрде қалай орнатуға болады
• Gantt жобасын Microsoft Project-те басып шығаруды қалай реттеуге болады
• Бағдарламалық қамтамасыз ету инженериясындағы негіз дегеніміз не, defiшеңберлердің анықтамасы мен түрлері
• Мұнда бірінші цифрлық ерік-жігер келеді blockchain