Чланци

Како користити Ларавел са Вуе.јс 3

Вуе.јс је један од најчешће коришћених ЈаваСцрипт оквира за креирање веб интерфејса и једностраничких апликација, заједно са Ларавел-ом постаје веома моћан алат за развој.

За развој веб апликација, алатка која се широко користи је вуејс, а у овом чланку ћемо видети како да га инсталирате и користите са Ларавел-ом. Вуе.јс оквир је био defiнито прогресивни оквир јер је специјализован за креирање ХТМЛ приказа и омогућава вам лаку интеграцију са компонентама других библиотека и пројеката.

Успех Вуе.јс је такође последица избора Ларавел да га предложи као фронтенд оквир, што је довело до издавања верзије 2.0.

Преглед садржаја

Креирање Ларавел пројекта

Први корак је, наравно, креирање новог пројекта у Ларавел-у. Ако га имате на рачунару, користите га или можете креирати нови само за овај водич.

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.

Када завршите, ако све ради добро, видећете нешто овако:

Инсталирање Вуе.јс

Након што припремимо Ларавел пројекат, можемо да наставимо са инсталацијом Вуе.јс 3. Да бисте то урадили, покрените следећу команду у директоријуму вашег пројекта:

npm install --save-dev 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"
    }
}

Као што видите, број верзије означава да је Вуе.јс 3 инсталиран.

Први покушај са Вуе.јс

У датотеку велцоме.бладе.пхп ставите следећи код:

<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“. Унутар елемента скрипте направили смо инстанцу Вуе, где конструктору прослеђујемо објекат који нам омогућава да defiзавршити неке параметре апликације, као што су подаци и понашања, у нашем случају:

ел: Референца на елемент div defiзавршено у хтмл-у
датум: скуп података

Чим се објекат креира, Vue стиче тхе div са id vue-app и води рачуна о замени чувара места {{ text }} са вредношћу садржаном у објекту података. Наравно, овај објекат може да садржи више од једног својства, чак и различитих типова: бројеви, низови и други угнежђени објекти су валидни

Поред ове замене, Вуе је такође активирао свој мотор и учинио апликацију прилагодљивом, тј. свака промена својства текста ће изазвати тренутно ажурирање одговарајућег елемента у ХТМЛ-у.

Други тест Вуе.јс

Да бисте прешли на другу пробну верзију, прво ћете морати да инстанцирате апликацију да бисте креирали нову компоненту. Отворите 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');

У овој датотеци креирамо нову инстанцу Вуе.јс, а да бисмо то урадили потребна нам је компонента Вуе коју смо назвали ХеллоВуе.вуе. За више информација консултујте званична документа .

Креирајте нову датотеку resources/components/HelloVue.vue и унесите следећи код:

// resources/components/HelloVue.vue

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

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

Датотека коју смо управо креирали је основна компонента Вуе.јс која се штампа 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() ће компајлирати било који Вуе.јс код и спојити га у производну ЈаваСцрипт датотеку. Функција прихвата објекат тамо где можете defiзавршите верзију Вуе.јс коју користите.

Након уређивања датотеке webpack.mix.js потребно је да преведете јавасцрипт код. Да бисмо то урадили, поново покрећемо команду npm run dev.

На крају, да бисте оперативно испробали Вуе, отворите датотеку 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>

Код, заједно са претходно креираном компонентом, ће произвести видео поруку Здраво Вуе!, због тога што се инстанца Вуе.јс монтира на ХТМЛ елемент са id app.

Покрените своју апликацију користећи php artisan serve, и отворите га у свом омиљеном претраживачу.

Ercole Palmeri

Такође би могли бити заинтересовани за ...