artikel

Cara menggunakan Laravel dengan Vue.js 3

Vue.js ialah salah satu framevorks JavaScript yang paling banyak digunakan untuk mencipta antara muka web dan aplikasi halaman tunggal, bersama-sama dengan Laravel ia menjadi alat pembangunan yang sangat berkuasa.

Untuk pembangunan aplikasi web, alat yang digunakan secara meluas ialah vuejs, dan dalam artikel ini kita akan melihat cara memasang dan menggunakannya dengan Laravel. Rangka kerja Vue.js ialah definya rangka kerja progresif kerana ia khusus dalam penciptaan paparan HTML, dan membolehkan anda menyepadukan dengan mudah dengan komponen perpustakaan dan projek lain.

Kejayaan Vue.js juga disebabkan oleh pilihan Laravel untuk mencadangkannya sebagai rangka kerja bahagian hadapan, sekali gus membawa kepada keluaran versi 2.0.

Isi kandungan

Penciptaan projek Laravel

Langkah pertama ialah, sudah tentu, untuk mencipta projek baharu dalam Laravel. Jika anda mempunyai satu pada komputer anda, gunakannya atau anda boleh mencipta yang baharu hanya untuk tutorial ini.

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

Selepas projek dimulakan, anda perlu memasang les npm ketagihan. Untuk melakukan ini, jalankan arahan berikut di dalam direktori projek anda:

npm install

Setelah kebergantungan dipasang, jalankan arahan berikut untuk membina sumber dan pastikan semuanya benar-benar berfungsi:

npm run dev

Perintah itu npm run dev melakukan pelbagai semakan dan binaan, khususnya Laravel Mix menyusun fail resources/js/app.js dan fail resources/css/app.css dalam fail public/js/app.js e public/css/app.css.

Apabila selesai jika semuanya berfungsi dengan baik, anda akan melihat sesuatu seperti ini:

Memasang Vue.js

Selepas menyediakan projek Laravel, kami boleh meneruskan untuk memasang Vue.js 3. Untuk melakukan ini, jalankan arahan berikut dalam direktori projek anda:

npm install --save-dev vue

Ini akan memasang Vue.js sebagai salah satu kebergantungan pembangunan. Selepas menyusun aset, fail JavaScript pengeluaran anda akan menjadi serba lengkap, jadi anda hanya perlu memasang Vue.js sebagai pergantungan pembangunan.

Untuk memastikan Vue 3 dipasang dengan betul, buka fail package.json (hadir dalam akar projek) dan cari "vue" dalam bahagian "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"
    }
}

Seperti yang anda lihat, nombor versi menunjukkan bahawa Vue.js 3 telah dipasang.

Percubaan pertama Vue.js

Dalam fail welcome.blade.php anda letakkan kod berikut:

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

Seperti yang anda lihat, kami telah mencipta elemen div dengan id "vue-app“. Di dalam elemen skrip kami telah mencipta contoh Vue, di mana kami menghantar pembina objek yang membolehkan kami untuk defitentukan beberapa parameter aplikasi, seperti data dan tingkah laku, dalam kes kami:

el: Rujukan kepada unsur div defiditulis dalam html
tarikh: set data

Sebaik sahaja objek itu dicipta, Vue memperoleh div dengan id vue-app dan menjaga menggantikan pemegang tempat {{ text }} dengan nilai yang terkandung dalam objek data. Sudah tentu, objek ini boleh mengandungi lebih daripada satu sifat, walaupun jenis yang berbeza: nombor, tatasusunan dan objek bersarang lain adalah sah

Selain penggantian ini, Vue juga telah mengaktifkan enjinnya dan menjadikan aplikasi responsif, iaitu sebarang perubahan pada sifat teks akan menyebabkan kemas kini segera elemen yang sepadan dalam HTML.

Ujian kedua Vue.js

Untuk meneruskan ke percubaan kedua, anda perlu membuat seketika apl untuk mencipta komponen baharu. Awak buka resources/app.js (o resources/js/app.js) dan kemas kini kandungannya seperti berikut:

// resources/app.js

require('./bootstrap');

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

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

Dalam fail ini, kami sedang mencipta contoh Vue.js baharu, dan untuk melakukan ini, kami memerlukan komponen Vue yang kami panggil HelloVue.vue. Untuk maklumat lanjut rujuk dokumen rasmi .

Buat fail baharu resources/components/HelloVue.vue dan masukkan kod berikut:

// resources/components/HelloVue.vue

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

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

Fail yang baru kami buat ialah komponen asas Vue.js yang dicetak Hello Vue! bagaimana header1 pada halaman. Akhirnya, buka webpack.mix.js fail dalam akar projek dan kemas kini kandungannya seperti berikut:

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

Dalam fail ini, kaedah panggilan .vue() akan menyusun mana-mana kod Vue.js dan menggabungkannya ke dalam fail JavaScript pengeluaran. Fungsi ini menerima objek di mana anda boleh definite versi Vue.js yang anda gunakan.

Selepas mengedit fail webpack.mix.js anda perlu menyusun kod javascript. Untuk melakukan ini, kami menjalankan arahan sekali lagi npm run dev.

Akhir sekali, untuk mencuba Vue secara operasi, buka fail resources/views/welcome.blade.php dan masukkan kod berikut:

<!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, bersama-sama dengan komponen yang dibuat sebelum ini, akan menghasilkan mesej video Hello Vue!, disebabkan contoh Vue.js dipasang pada elemen HTML dengan id app.

Jalankan aplikasi anda menggunakan php artisan serve, dan bukanya dalam penyemak imbas kegemaran anda.

Ercole Palmeri

Anda mungkin juga berminat dengan ...