Членове

Как да използвате Laravel с Vue.js 3

Vue.js е един от най-използваните JavaScript фреймворкове за създаване на уеб интерфейси и едностранични приложения, заедно с Laravel се превръща в много мощен инструмент за разработка.

За разработването на уеб приложения, широко използван инструмент е vuejs и в тази статия ще видим как да го инсталирате и използвате с Laravel. Рамката Vue.js беше defiнитро прогресивна рамка защото е специализиран в създаването на HTML изгледи и ви позволява лесно да се интегрирате с компоненти на други библиотеки и проекти.

Успехът на Vue.js се дължи и на избора на Laravel да го предложат като фронтенд рамка, което води до пускането на версия 2.0.

Съдържание

Създаване на проект Laravel

Първата стъпка е, разбира се, да създадете нов проект в Laravel. Ако имате такъв на компютъра си, използвайте го или можете да създадете нов само за този урок.

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

След като проектът стартира, ще трябва да инсталирате npm зависимости. За да направите това, изпълнете следната команда в директорията на вашия проект:

npm install

След като зависимостите са инсталирани, изпълнете следната команда, за да изградите ресурсите и да се уверите, че всичко наистина работи:

npm run dev

Командата npm run dev извършва различни проверки и изграждане, по-специално Laravel Mix компилирайте файла resources/js/app.js и файла resources/css/app.css във файлове public/js/app.js e public/css/app.css.

Когато приключите, ако всичко работи добре, ще видите нещо подобно:

Инсталиране на Vue.js

След като подготвим проекта Laravel, можем да продължим да инсталираме Vue.js 3. За да направите това, изпълнете следната команда в директорията на вашия проект:

npm install --save-dev vue

Това ще инсталира Vue.js като една от зависимостите за разработка. След компилирането на активите, вашият производствен JavaScript файл ще бъде самостоятелен, така че просто трябва да инсталирате Vue.js като зависимост за разработка.

За да се уверите, че Vue 3 е инсталиран правилно, отворете файла package.json (присъства в корена на проекта) и потърсете "vue" в секцията "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"
    }
}

Както можете да видите, номерът на версията показва, че Vue.js 3 е инсталиран.

Първи опит на Vue.js

Във вашия файл welcome.blade.php поставете следния код:

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

Както можете да видите, създадохме елемент div с id "vue-app“. Вътре в скриптовия елемент създадохме екземпляр на Vue, където предаваме на конструктора обект, който ни позволява да defiизтрийте някои параметри на приложението, като данни и поведение, в нашия случай:

el: Препратка към елемента div defiзавършен в html
дата: набор от данни

Веднага след като обектът е създаден, Vue придобива div с id vue-app и се грижи за подмяната на контейнера {{ text }} със стойността, съдържаща се в обекта с данни. Разбира се, този обект може да съдържа повече от едно свойство, дори от различни типове: числа, масиви и други вложени обекти са валидни

Освен тази подмяна, Vue също е активирал своя двигател и е направил приложението отзивчиво, т.е. всяка промяна в свойството text ще доведе до незабавна актуализация на съответния елемент в HTML.

Втори тест на Vue.js

За да продължите към втората пробна версия, първо ще трябва да инстанцирате приложението, за да създадете нов компонент. Ти отвори resources/app.js (o resources/js/app.js) и актуализира съдържанието му, както следва:

// resources/app.js

require('./bootstrap');

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

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

В този файл създаваме нов екземпляр на Vue.js и за да направим това, се нуждаем от Vue компонент, който нарекохме HelloVue.vue. За повече информация консултирайте се с официалните документи .

Създайте нов файл resources/components/HelloVue.vue и въведете следния код:

// resources/components/HelloVue.vue

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

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

Файлът, който току-що създадохме, е основен Vue.js компонент, който отпечатва Hello Vue! Ела header1 на страницата. Накрая отворете webpack.mix.js файл в корена на проекта и актуализирайте съдържанието му, както следва:

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

В този файл извикването на метода .vue() ще компилира всеки Vue.js код и ще го обедини в производствения JavaScript файл. Функцията приема обект, където можете defiизчистете версията на Vue.js, която използвате.

След редактиране на файла webpack.mix.js трябва да компилирате javascript кода. За да направим това, изпълняваме командата отново npm run dev.

И накрая, за да изпробвате Vue оперативно, отворете файла resources/views/welcome.blade.php и въведете следния код:

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

Кодът, заедно с предварително създадения компонент, ще създаде видео съобщение Здравей Вю!, поради това, че екземплярът на Vue.js е монтиран на HTML елемент с id app.

Стартирайте приложението си, като използвате php artisan serveи го отворете в любимия си браузър.

Ercole Palmeri

Може да се интересувате и от ...