Artikel

Carane nggunakake Laravel karo Vue.js 3

Vue.js minangka salah sawijining framevorks JavaScript sing paling akeh digunakake kanggo nggawe antarmuka web lan aplikasi kaca siji, bebarengan karo Laravel dadi alat pangembangan sing kuat banget.

Kanggo pangembangan aplikasi web, alat sing akeh digunakake yaiku vuejs, lan ing artikel iki kita bakal weruh carane nginstal lan nggunakake Laravel. Framework Vue.js ana defiiki kerangka progresif amarga khusus ing nggawe tampilan HTML, lan ngidini sampeyan gampang nggabungake karo komponen perpustakaan lan proyek liyane.

Sukses Vue.js uga amarga pilihan saka Laravel kanggo suggest minangka framework frontend, saéngga ndadékaké kanggo release saka versi 2.0.

Daftar isi

Nggawe proyek Laravel

Langkah pisanan, mesthi, nggawe proyek anyar ing Laravel. Yen sampeyan duwe komputer, gunakake utawa sampeyan bisa nggawe sing anyar mung kanggo tutorial iki.

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

Sawise proyek diwiwiti, sampeyan kudu nginstal npm kecanduan. Kanggo nindakake iki, jalanake perintah ing ngisor iki ing direktori proyek sampeyan:

npm install

Sawise dependensi wis diinstal, jalanake printah ing ngisor iki kanggo mbangun sumber daya lan priksa manawa kabeh bisa digunakake:

npm run dev

dhawuh npm run dev nindakake macem-macem mriksa lan mbangun, utamane Laravel Mix ngumpulake file resources/js/app.js lan file resources/css/app.css ing file public/js/app.js e public/css/app.css.

Yen wis rampung yen kabeh bisa mlaku, sampeyan bakal weruh kaya iki:

Nginstal Vue.js

Sawise nyiapake project Laravel, kita bisa nerusake kanggo nginstal Vue.js 3. Kanggo nindakake iki, mbukak printah ing ngisor iki ing direktori project:

npm install --save-dev vue

Iki bakal nginstal Vue.js minangka salah siji saka dependensi pembangunan. Sawise ngumpulake aset, file JavaScript produksi sampeyan bakal mandhiri, dadi sampeyan mung kudu nginstal Vue.js minangka dependensi pangembangan.

Kanggo mesthekake yen Vue 3 wis diinstal kanthi bener, bukak file kasebut package.json (saiki ing ROOT project) lan nelusuri "vue" ing bagean kasebut "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"
    }
}

Nalika sampeyan bisa ndeleng, nomer versi nuduhake yen Vue.js 3 wis diinstal.

Kawitan nyoba Vue.js

Ing file welcome.blade.php sampeyan sijine kode ing ngisor iki:

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

Nalika sampeyan bisa ndeleng, kita wis nggawe unsur div con id "vue-app“. Ing unsur skrip kita wis nggawe conto Vue, ing ngendi kita ngliwati konstruktor obyek sing ngidini kita definish sawetara paramèter aplikasi, kayata data lan prilaku, ing kasus kita:

el: Referensi kanggo unsur div defirampung ing html
tanggal: dataset

Sanalika obyek digawe, Vue ndarbeni ing div con id vue-app lan njupuk care saka ngganti placeholder {{ text }} kanthi nilai sing ana ing obyek data. Mesthi, obyek iki bisa ngemot luwih saka siji properti, malah saka macem-macem jinis: nomer, larik lan obyek nested liyane sah.

Saliyane panggantos iki, Vue uga ngaktifake mesin lan nggawe aplikasi responsif, yaiku, owah-owahan ing properti teks bakal nyebabake nganyari cepet saka unsur sing cocog ing HTML.

Test kapindho Vue.js

Kanggo nerusake kanggo nyoba kapindho, sampeyan kudu instantiate app kanggo nggawe komponen anyar. Sampeyan mbukak resources/app.js (o resources/js/app.js) lan nganyari isine kaya ing ngisor iki:

// resources/app.js

require('./bootstrap');

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

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

Ing berkas iki kita nggawe Vue.js Kayata anyar, lan kanggo nindakake iki kita kudu komponen Vue kang kita wis disebut HelloVue.vue. Kanggo informasi luwih lengkap takon karo dokumen resmi .

Nggawe file anyar resources/components/HelloVue.vue lan ketik kode ing ngisor iki:

// resources/components/HelloVue.vue

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

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

File kita mung digawe iku komponen Vue.js dhasar sing prints Hello Vue! teka header1 ing kaca. Pungkasan, bukak webpack.mix.js file ing ROOT proyek lan nganyari isine kaya ing ngisor iki:

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

Ing file iki, cara nelpon .vue() bakal ngumpulake kode Vue.js lan mbendel menyang file JavaScript produksi. Fungsi nampa obyek ing ngendi sampeyan bisa definish versi Vue.js sampeyan nggunakake.

Sawise nyunting file webpack.mix.js sampeyan kudu ngumpulake kode javascript. Kanggo nindakake iki, kita mbukak printah maneh npm run dev.

Pungkasan, kanggo nyoba Vue kanthi operasional, bukak file kasebut resources/views/welcome.blade.php lan ketik kode ing ngisor iki:

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

Kode kasebut, bebarengan karo komponen sing digawe sadurunge, bakal ngasilake pesen video Hello Vue!, amarga conto Vue.js dipasang ing unsur HTML karo id app.

Jalanake aplikasi sampeyan nggunakake php artisan serve, lan bukak ing browser favorit.

Ercole Palmeri

Sampeyan bisa uga kasengsem ing ...