[Laravel & Vue.JS] 1.Video: “Laravel İçinde Vue.JS Kullanımı”



2 dakikalık okuma
February 20, 2019

Sıfırdan Laravel web uygulaması kurduğunuzda içerisinde VueJS hazır ve entegre şekilde geliyor. Sadece sizin birkaç ufak ayar yapmanız gerekmektedir.

İşte birkaç ufak ayar için küçük bir altın dokunuşa ihtiyaç vardır. Bu dokunuştan sonra tüm uygulama boyunca Vue.JS, Laravel içinde kullanımınıza amade olacaktır.

Buyrun, aşağıdaki videoda detaylı bir şekilde bunu anlattım:


Video Özeti:

Vue kelimesi Fransızca kökenli bir kelime olup Türkçe karşılığı “görünüm, görüntü” diyebiliriz. İngilizcede de “view” kelimesine tekabul ediyor. Bu kelimenin Türkçe okunuşu “vüü” şeklinde.

1.Video serimizde Vue.js’in Laravel içerisinde kullanımından bahsedeceğim. Laravel içerisinde Vue.js’i aktif hale geçirip kullanıma hazır yapmak için aşağıdaki adımları uygulayalım:

  1. Package.json dosyası içerisinde “bağlımlı Javascript dosyalarını” kurmamız gerekir. Bunun için Laravel’in ana/root dizininde şöyle yazalım:

    npm install

  2. resources > js” klasörü içerisinde app.js dosyasında “Vue.js” nesnesi oluşturularak uygulama boyunca kullanımımıza sunulmaktadır.

Vue.js

  1. Şimdi terminalde Laravel ana/root dizininde:

    npm run dev
    

    yazarak Laravel Mix ile bu dosyaları paketleyip public > js klasörüne çıkarttıralım.

  2. Şimdi resources > view > welcome.blade.php dosyamızı açalım.

    <div id="app">
    
    </div>
    

    yazıyoruz. Artık id=”app” olan bu div tagı arasında bulunan elementlere Vue.js erişebilecek ve bunun arasında olan taglarda işlem yapabileceğiz.

    Vue.js

  3. Master sayfamızda vue.js’i tanımlamayı unutmayalım. Bunun için </body> tagından sonra “Vue.js” javascript dosyamızı sayfaya aşağıdaki gibi iliştirelim:

    <script src="{{asset('js/app.js')}}"></script>
    

    Bu kadar!


Etiketler: