Jak używać Laravela z Vue.js 3

Vue.js jest jednym z najczęściej używanych frameworków JavaScript do tworzenia interfejsów internetowych i aplikacji jednostronicowych, wraz z Laravelem staje się bardzo potężnym narzędziem programistycznym.

Do tworzenia aplikacji internetowych szeroko stosowanym narzędziem jest vuejs, a w tym artykule zobaczymy, jak go zainstalować i używać z Laravelem. Framework Vue.js był definito progresywne ramy ponieważ specjalizuje się w tworzeniu widoków HTML i pozwala na łatwą integrację z komponentami innych bibliotek i projektów.

Sukces Vue.js wynika również z wyboru laravel zasugerować go jako framework frontendowy, co doprowadziło do wydania wersji 2.0.

Tworzenie projektów w Laravel

Pierwszym krokiem jest oczywiście stworzenie nowego projektu w Laravelu. Jeśli masz taki na swoim komputerze, użyj go lub możesz utworzyć nowy tylko na potrzeby tego samouczka.

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

Po uruchomieniu projektu konieczne będzie zainstalowanie npm uzależnienia. Aby to zrobić, uruchom następujące polecenie w katalogu projektu:

npm install

Po zainstalowaniu zależności uruchom następujące polecenie, aby zbudować zasoby i upewnić się, że wszystko naprawdę działa:

npm run dev

Komenda npm run dev wykonuje w szczególności różne testy i kompilacje Laravel Mix skompiluj plik resources/js/app.js i plik resources/css/app.css w plikach public/js/app.js e public/css/app.css.

Po zakończeniu, jeśli wszystko działa dobrze, zobaczysz coś takiego:

Instalowanie Vue.js

Po przygotowaniu projektu Laravel możemy przystąpić do instalacji Vue.js 3. Aby to zrobić, uruchom następujące polecenie w swoim katalogu projektu:

npm install --save-dev vue

Spowoduje to zainstalowanie Vue.js jako jednej z zależności programistycznych. Po skompilowaniu zasobów Twój produkcyjny plik JavaScript będzie samowystarczalny, więc wystarczy zainstalować Vue.js jako zależność programistyczną.

Aby upewnić się, że Vue 3 zostało poprawnie zainstalowane, otwórz plik package.json (obecny w katalogu głównym projektu) i wyszukaj "vue" w dziale "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"
    }
}

Jak widać, numer wersji wskazuje, że zainstalowano Vue.js 3. 

Pierwsza próba Vue.js

W swoim pliku welcome.blade.php umieść następujący kod:

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

Jak widać, stworzyliśmy element div z id "vue-app„. Wewnątrz elementu script utworzyliśmy instancję Vue, gdzie przekazujemy konstruktorowi obiekt, który nam na to pozwala defidokończ niektóre parametry aplikacji, takie jak dane i zachowania, w naszym przypadku:

• el: Odniesienie do elementu div defiskończyłem w html
• data: zbiór danych

Zaraz po utworzeniu obiektu Vue nabywa div z id vue-app i dba o zastąpienie symbolu zastępczego {{ text }} z wartością zawartą w obiekcie danych. Oczywiście ten obiekt może zawierać więcej niż jedną właściwość, nawet różnych typów: liczby, tablice i inne zagnieżdżone obiekty są poprawne

Poza tą zamianą, Vue aktywowało również swój silnik i sprawiło, że aplikacja jest responsywna, tzn. każda zmiana właściwości text spowoduje natychmiastową aktualizację odpowiedniego elementu w kodzie HTML.

Drugi test Vue.js

Aby przejść do drugiej wersji próbnej, musisz najpierw utworzyć instancję aplikacji w celu utworzenia nowego składnika. Otwierasz resources/app.js (o resources/js/app.js) i zaktualizuj jego treść w następujący sposób:

// resources/app.js

require('./bootstrap');

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

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

W tym pliku tworzymy nową instancję Vue.js i do tego potrzebujemy komponentu Vue, który nazwaliśmy HelloVue.vue. Po więcej informacji zapoznać się z oficjalnymi dokumentami . 

Utwórz nowy plik resources/components/HelloVue.vue i wprowadź następujący kod:

// resources/components/HelloVue.vue

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

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

Plik, który właśnie utworzyliśmy, jest podstawowym komponentem Vue.js, który drukuje Hello Vue! jak header1 na stronie. Na koniec otwórz webpack.mix.js plik w katalogu głównym projektu i zaktualizuj jego zawartość w następujący sposób:

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

W tym pliku wywołanie metody .vue() skompiluje dowolny kod Vue.js i spakuje go w produkcyjnym pliku JavaScript. Funkcja akceptuje obiekt tam, gdzie jest to możliwe defiZakończ wersję Vue.js, której używasz. 

Po edycji pliku webpack.mix.js musisz skompilować kod javascript. Aby to zrobić, ponownie uruchamiamy polecenie npm run dev.

Na koniec, aby wypróbować Vue operacyjnie, otwórz plik resources/views/welcome.blade.php i wprowadź następujący kod:

<!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 wraz z wcześniej utworzonym komponentem wygeneruje komunikat wideo Witaj Vue!, ponieważ instancja Vue.js jest montowana w elemencie HTML za pomocą id app.

Uruchom swoją aplikację za pomocą php artisan servei otwórz go w swojej ulubionej przeglądarce.

Ercole Palmeri

Może Cię również zainteresować ...

• Dostawcy usług w Laravel: czym są i jak korzystać z usługodawców w Laravel
• Jak zainstalować ChatGPT lokalnie na swoim komputerze
• Jak dostosować drukowanie projektu Gantta w programie Microsoft Project
• Czym jest Framework w Inżynierii Oprogramowania, defidefinicja i rodzaje ram
• Nadchodzi pierwsza cyfrowa wola z blockchain