raksti

Kā lietot Laravel ar Vue.js 3

Vue.js ir viens no visvairāk izmantotajiem JavaScript rāmjiem tīmekļa saskarņu un vienas lapas lietojumprogrammu izveidei, kopā ar Laravel tas kļūst par ļoti spēcīgu izstrādes rīku.

Tīmekļa lietotņu izstrādei plaši izmantots rīks ir vuejs, un šajā rakstā mēs redzēsim, kā to instalēt un lietot kopā ar Laravel. Vue.js ietvars bija definito progresīva sistēma jo tas ir specializējies HTML skatu izveidē un ļauj viegli integrēties ar citu bibliotēku un projektu komponentiem.

Vue.js panākumi ir saistīti arī ar izvēli Laravel ieteikt to kā priekšgala sistēmu, tādējādi izlaižot versiju 2.0.

Satura rādītājs

Laravel projekta izveide

Pirmais solis, protams, ir jauna projekta izveide Laravelā. Ja jūsu datorā tāds ir, izmantojiet to vai arī varat izveidot jaunu tikai šai apmācībai.

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

Pēc projekta sākšanas jums būs jāinstalē npm atkarībām. Lai to izdarītu, projekta direktorijā palaidiet šādu komandu:

npm install

Kad atkarības ir instalētas, palaidiet šo komandu, lai izveidotu resursus un pārliecinātos, ka viss patiešām darbojas:

npm run dev

Komanda npm run dev veic dažādas pārbaudes un veido, jo īpaši Laravel Mix apkopot failu resources/js/app.js un failu resources/css/app.css failos public/js/app.js e public/css/app.css.

Kad esat pabeidzis, ja viss darbojas labi, jūs redzēsit kaut ko līdzīgu:

Vue.js instalēšana

Pēc Laravel projekta sagatavošanas mēs varam turpināt Vue.js 3 instalēšanu. Lai to paveiktu, projekta direktorijā palaidiet šādu komandu:

npm install --save-dev vue

Tādējādi Vue.js tiks instalēta kā viena no attīstības atkarībām. Pēc līdzekļu apkopošanas jūsu ražošanas JavaScript fails būs autonoms, tāpēc jums vienkārši jāinstalē Vue.js kā izstrādes atkarība.

Lai pārliecinātos, ka Vue 3 ir instalēts pareizi, atveriet failu package.json (klāt projekta saknē) un meklējiet "vue" sadaļā "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"
    }
}

Kā redzat, versijas numurs norāda, ka Vue.js 3 ir instalēts.

Pirmais Vue.js mēģinājums

Failā welcome.blade.php ievietojiet šādu kodu:

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

Kā redzat, mēs esam izveidojuši elementu div ar id "vue-app“. Skripta elementa iekšpusē esam izveidojuši Vue gadījumu, kur mēs nododam konstruktoram objektu, kas ļauj mums definorādiet dažus lietojumprogrammas parametrus, piemēram, datus un darbības, mūsu gadījumā:

el: atsauce uz elementu div defipabeigts html
datums: datu kopa

Tiklīdz objekts ir izveidots, Vue iegūst div ar id vue-app un rūpējas par viettura aizstāšanu {{ text }} ar vērtību, kas ietverta datu objektā. Protams, šajā objektā var būt vairāk nekā viens rekvizīts, pat dažādu veidu: skaitļi, masīvi un citi ligzdotie objekti ir derīgi

Papildus šai nomaiņai Vue ir arī aktivizējis savu dzinēju un padarījis lietojumprogrammu atsaucīgu, t.i., jebkuras teksta rekvizīta izmaiņas izraisīs tūlītēju atbilstošā elementa atjaunināšanu HTML.

Otrais Vue.js tests

Lai pārietu uz otro izmēģinājuma versiju, vispirms ir jāizveido lietotne, lai izveidotu jaunu komponentu. Tu atver resources/app.js (o resources/js/app.js) un atjaunināt tā saturu šādi:

// resources/app.js

require('./bootstrap');

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

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

Šajā failā mēs izveidojam jaunu Vue.js instanci, un, lai to izdarītu, mums ir nepieciešams Vue komponents, ko mēs nosaucām par HelloVue.vue. Lai iegūtu vairāk informācijas skatiet oficiālos dokumentus .

Izveidojiet jaunu failu resources/components/HelloVue.vue un ievadiet šādu kodu:

// resources/components/HelloVue.vue

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

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

Fails, ko tikko izveidojām, ir pamata Vue.js komponents, kas tiek drukāts Hello Vue! Nākt header1 lapā. Visbeidzot atveriet webpack.mix.js failu projekta saknē un atjauniniet tā saturu šādi:

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

Šajā failā metodes izsaukums .vue() apkopos jebkuru Vue.js kodu un apvienos to ražošanas JavaScript failā. Funkcija pieņem objektu, kur varat definish Vue.js versiju, kuru izmantojat.

Pēc faila rediģēšanas webpack.mix.js jums ir jāapkopo javascript kods. Lai to izdarītu, mēs palaižam komandu vēlreiz npm run dev.

Visbeidzot, lai izmēģinātu Vue, atveriet failu resources/views/welcome.blade.php un ievadiet šādu kodu:

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

Kods kopā ar iepriekš izveidoto komponentu veidos video ziņojumu Sveiki Vue!, jo Vue.js gadījums ir uzstādīts HTML elementā ar id app.

Palaidiet lietojumprogrammu, izmantojot php artisan serveun atveriet to savā iecienītākajā pārlūkprogrammā.

Ercole Palmeri

Jūs varētu interesēt arī ...