макалалар

Laravelди Vue.js менен кантип колдонсо болот 3

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 менен id «vue-app". Скрипт элементинин ичинде биз Vue үлгүсүн түздүк, анда биз конструкторго объектти өткөрүп беребиз. defiБиздин учурда, маалыматтар жана жүрүм-турум сыяктуу кээ бир колдонмо параметрлери:

el: Элементке шилтеме div defihtmlде бүттү
дата: маалымат топтому

Объект түзүлөөрү менен, 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 инстанциясын түзүп жатабыз жана бул үчүн бизге 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

Ошондой эле сизге кызыктуу болушу мүмкүн ...