Laravelni Vue.js 3 bilan qanday ishlatish kerak

Vue.js veb-interfeyslar va bitta sahifali ilovalarni yaratish uchun eng ko'p ishlatiladigan JavaScript ramkalaridan biri bo'lib, Laravel bilan birgalikda u juda kuchli ishlab chiqish vositasiga aylanadi.

Veb-ilovalarni ishlab chiqish uchun keng qo'llaniladigan vosita vuejs bo'lib, ushbu maqolada biz uni Laravel bilan qanday o'rnatish va ishlatishni ko'rib chiqamiz. Vue.js ramkasi edi defiperchin progressiv ramka chunki u HTML ko'rinishlarini yaratishga ixtisoslashgan va boshqa kutubxonalar va loyihalar komponentlari bilan osongina integratsiyalashish imkonini beradi.

Vue.js ning muvaffaqiyati ham tanlovga bog'liq Laravel uni frontend ramka sifatida taklif qilish, bu esa 2.0 versiyasini chiqarishga olib keladi.

Laravel loyihasini yaratish

Birinchi qadam, albatta, Laravelda yangi loyiha yaratishdir. Agar sizning kompyuteringizda kompyuteringiz bo'lsa, undan foydalaning yoki faqat ushbu qo'llanma uchun yangisini yaratishingiz mumkin.

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

Loyihani ishga tushirgandan so'ng, siz o'rnatishingiz kerak bo'ladi npm giyohvandlik. Buning uchun loyiha katalogingizda quyidagi buyruqni bajaring:

npm install

Bog'liqliklar o'rnatilgandan so'ng, resurslarni yaratish uchun quyidagi buyruqni bajaring va hamma narsa haqiqatan ham ishlayotganiga ishonch hosil qiling:

npm run dev

Buyruq npm run dev xususan, turli xil tekshiruvlar va qurilishlarni amalga oshiradi Laravel Mix faylni kompilyatsiya qilish resources/js/app.js va fayl resources/css/app.css fayllarda public/js/app.js e public/css/app.css.

Tugatgandan so'ng, agar hamma narsa yaxshi ishlayotgan bo'lsa, siz shunga o'xshash narsani ko'rasiz:

Vue.js o'rnatilmoqda

Laravel loyihasini tayyorlagandan so'ng, biz Vue.js 3 ni o'rnatishni davom ettirishimiz mumkin. Buning uchun loyiha katalogingizda quyidagi buyruqni bajaring:

npm install --save-dev vue

Bu Vue.js-ni rivojlanishga bog'liqliklardan biri sifatida o'rnatadi. Aktivlarni kompilyatsiya qilgandan so'ng, ishlab chiqarish JavaScript faylingiz mustaqil bo'ladi, shuning uchun siz Vue.js-ni rivojlanishga bog'liqlik sifatida o'rnatishingiz kerak.

Vue 3 to'g'ri o'rnatilganligiga ishonch hosil qilish uchun faylni oching package.json (loyiha ildizida mavjud) va qidiring "vue" bo'limda "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"
    }
}

Ko'rib turganingizdek, versiya raqami Vue.js 3 o'rnatilganligini bildiradi. 

Vue.js-ning birinchi urinishi

Welcome.blade.php faylingizga quyidagi kodni qo'ying:

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

Ko'rib turganingizdek, biz element yaratdik div con id "vue-app“. Skript elementi ichida biz Vue misolini yaratdik, u erda biz konstruktorga ob'ektni o'tkazishimizga imkon beradi. defiBizning holatlarimizda ma'lumotlar va xatti-harakatlar kabi ba'zi dastur parametrlarini nish:

• el: elementga havola div defihtml da tugallangan
• sana: ma'lumotlar to'plami

Ob'ekt yaratilishi bilanoq, Vue ni oladi div con id vue-app va to'ldiruvchini almashtirish haqida g'amxo'rlik qiladi {{ text }} ma'lumotlar ob'ektidagi qiymat bilan. Albatta, bu ob'ekt bir nechta xususiyatni o'z ichiga olishi mumkin, hatto har xil turdagi: raqamlar, massivlar va boshqa ichki ob'ektlar haqiqiydir

Ushbu almashtirishdan tashqari, Vue o'z mexanizmini ham faollashtirdi va dasturni sezgir qildi, ya'ni matn xususiyatiga har qanday o'zgartirish HTML-dagi tegishli elementning bir zumda yangilanishiga olib keladi.

Vue.js ikkinchi sinovi

Ikkinchi sinovga o'tish uchun avvalo yangi komponent yaratish uchun ilovani ishga tushirishingiz kerak bo'ladi. Siz ochasiz resources/app.js (o resources/js/app.js) va uning mazmunini quyidagicha yangilang:

// resources/app.js

require('./bootstrap');

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

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

Ushbu faylda biz yangi Vue.js nusxasini yaratmoqdamiz va buning uchun bizga HelloVue.vue deb nomlangan Vue komponenti kerak. Qo'shimcha ma'lumot uchun rasmiy hujjatlar bilan tanishing . 

Yangi fayl yarating resources/components/HelloVue.vue va quyidagi kodni kiriting:

// resources/components/HelloVue.vue

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

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

Biz hozirgina yaratgan fayl chop etuvchi asosiy Vue.js komponentidir Hello Vue! kelib header1 sahifada. Nihoyat, oching webpack.mix.js faylni loyiha ildizida oching va uning mazmunini quyidagicha yangilang:

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

Ushbu faylda usul chaqiruvi .vue() har qanday Vue.js kodini kompilyatsiya qiladi va uni ishlab chiqarish JavaScript fayliga to'playdi. Funktsiya mumkin bo'lgan ob'ektni qabul qiladi defiSiz foydalanayotgan Vue.js versiyasini tekshiring. 

Faylni tahrir qilgandan so'ng webpack.mix.js javascript kodini kompilyatsiya qilishingiz kerak. Buning uchun buyruqni yana ishga tushiramiz npm run dev.

Va nihoyat, Vue-ni operatsion tarzda sinab ko'rish uchun faylni oching resources/views/welcome.blade.php va quyidagi kodni kiriting:

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

Kod oldindan yaratilgan komponent bilan birgalikda video xabarni ishlab chiqaradi Salom Vue!, Vue.js misoli HTML elementiga o'rnatilganligi sababli id app.

yordamida ilovangizni ishga tushiring php artisan serve, va uni sevimli brauzeringizda oching.

Ercole Palmeri

Siz ham qiziqishingiz mumkin ...

• Laraveldagi xizmat ko'rsatuvchi provayderlar: ular nima va Laravelda xizmat ko'rsatuvchi provayderlardan qanday foydalanish
• ChatGPT-ni kompyuteringizga qanday o'rnatish kerak
• Microsoft Project-da Gantt loyihasini bosib chiqarishni sozlash
• Dasturiy ta'minot muhandisligida ramka nima, defiramkalarning ta'rifi va turlari
• Bu erda birinchi raqamli iroda keladi blockchain