Makaleler

Vue.js 3 ile Laravel nasıl kullanılır?

Vue.js, web arayüzleri ve tek sayfa uygulamaları oluşturmak için en çok kullanılan JavaScript çerçevelerinden biridir ve Laravel ile birlikte çok güçlü bir geliştirme aracı haline gelir.

Web uygulamalarının geliştirilmesi için yaygın olarak kullanılan bir araç vuejs'tir ve bu makalede bunun Laravel ile nasıl kurulacağını ve kullanılacağını göreceğiz. Vue.js çerçevesi şuydu: definitro ilerici çerçeve çünkü HTML görünümlerinin oluşturulmasında uzmanlaşmıştır ve diğer kitaplıkların ve projelerin bileşenleriyle kolayca entegre olmanızı sağlar.

Vue.js'nin başarısı aynı zamanda laravel onu bir ön uç çerçevesi olarak önermek, böylece 2.0 sürümünün piyasaya sürülmesine yol açar.

İçindekiler

laravel proje oluşturma

İlk adım elbette Laravel'de yeni bir proje oluşturmaktır. Bilgisayarınızda varsa, onu kullanın veya yalnızca bu eğitim için yeni bir tane oluşturabilirsiniz.

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

Proje başladıktan sonra yüklemeniz gerekecek. npm bağımlılıklar. Bunu yapmak için, proje dizininizde aşağıdaki komutu çalıştırın:

npm install

Bağımlılıklar yüklendikten sonra, kaynakları oluşturmak ve her şeyin gerçekten çalıştığından emin olmak için aşağıdaki komutu çalıştırın:

npm run dev

Komuta npm run dev özellikle çeşitli kontroller ve derlemeler gerçekleştirir Laravel Mix dosyayı derle resources/js/app.js ve dosya resources/css/app.css dosyalarda public/js/app.js e public/css/app.css.

Bittiğinde, her şey yolunda giderse, şöyle bir şey göreceksiniz:

Vue.js'yi yükleme

Laravel projesini hazırladıktan sonra Vue.js 3 kurulumuna geçebiliriz. Bunun için proje dizininizde aşağıdaki komutu çalıştırın:

npm install --save-dev vue

Bu, Vue.js'yi geliştirme bağımlılıklarından biri olarak yükleyecektir. Varlıkları derledikten sonra, üretim JavaScript dosyanız bağımsız olacaktır, bu nedenle geliştirme bağımlılığı olarak Vue.js'yi yüklemeniz yeterlidir.

Vue 3'ün doğru yüklendiğinden emin olmak için dosyayı açın. package.json (proje kökünde bulunur) ve arayın "vue" bölümde "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"
    }
}

Gördüğünüz gibi sürüm numarası Vue.js 3'ün yüklendiğini gösteriyor.

Vue.js'nin ilk denemesi

welcome.blade.php dosyanıza aşağıdaki kodu girin:

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

Gördüğünüz gibi bir element oluşturduk. div ile id "vue-app“. Komut dosyası öğesinin içinde Vue'nun bir örneğini oluşturduk; burada yapıcıya aşağıdakileri yapmamıza izin veren bir nesneyi aktarıyoruz: defiBizim durumumuzda veri ve davranışlar gibi bazı uygulama parametrelerini tamamlayın:

el: Öğeye referans div defihtml'de bitti
tarih: veri kümesi

Nesne yaratılır yaratılmaz, Vue satın alır div ile id vue-app ve yer tutucunun değiştirilmesiyle ilgilenir {{ text }} veri nesnesinin içerdiği değerle. Tabii ki, bu nesne farklı türlerde bile birden fazla özellik içerebilir: sayılar, diziler ve diğer iç içe geçmiş nesneler geçerlidir.

Bu değişikliğin yanı sıra, Vue ayrıca motorunu etkinleştirdi ve uygulamayı duyarlı hale getirdi, yani text özelliğindeki herhangi bir değişiklik, HTML'deki ilgili öğenin anında güncellenmesine neden olacaktır.

Vue.js'nin ikinci testi

İkinci denemeye geçmek için önce yeni bir bileşen oluşturmak üzere uygulamayı başlatmanız gerekir. Sen aç resources/app.js (o resources/js/app.js) ve içeriğini aşağıdaki gibi güncelleyin:

// resources/app.js

require('./bootstrap');

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

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

Bu dosyada yeni bir Vue.js örneği oluşturuyoruz ve bunu yapmak için HelloVue.vue adını verdiğimiz bir Vue bileşenine ihtiyacımız var. Daha fazla bilgi için resmi belgelere bakın .

yeni bir dosya oluştur resources/components/HelloVue.vue ve aşağıdaki kodu girin:

// resources/components/HelloVue.vue

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

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

Az önce oluşturduğumuz dosya, yazdıran temel bir Vue.js bileşenidir. Hello Vue! nasıl header1 sayfada. Son olarak, açın webpack.mix.js proje kökündeki dosya ve içeriğini aşağıdaki gibi güncelleyin:

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

Bu dosyada, yöntem çağrısı .vue() herhangi bir Vue.js kodunu derleyecek ve bunu üretim JavaScript dosyasında paketleyecektir. İşlev, yapabileceğiniz bir nesneyi kabul eder. defiKullandığınız Vue.js sürümünü tamamlayın.

Dosyayı düzenledikten sonra webpack.mix.js javascript kodunu derlemeniz gerekir. Bunun için komutu tekrar çalıştırıyoruz. npm run dev.

Son olarak, Vue'yu işlevsel olarak denemek için dosyayı açın. resources/views/welcome.blade.php ve aşağıdaki kodu girin:

<!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, önceden oluşturulan bileşenle birlikte bir video mesajı üretecektir. Merhaba Vue!, Vue.js örneğinin bir HTML öğesine bağlanması nedeniyle id app.

kullanarak uygulamanızı çalıştırın php artisan serve, ve favori tarayıcınızda açın.

Ercole Palmeri

Şunlarla da ilgilenebilirsiniz ...