товары

Как использовать 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 con id vue-app“. Внутри элемента script мы создали экземпляр Vue, где мы передаем конструктору объект, который позволяет нам defiзавершить некоторые параметры приложения, такие как данные и поведение, в нашем случае:

  • el: ссылка на элемент div defiзакончил в html
  • дата: набор данных

Как только объект создан, Vue приобретает div con 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

Вам также может быть интересно ...

Инновационный бюллетень
Не пропустите самые важные новости об инновациях. Зарегистрируйтесь, чтобы получать их по электронной почте.

АРТИКОЛИ recenti

Как подсчитать количество символов, содержащихся в файле, опубликованном в Интернете?

Символы — это отдельные элементы текста. Это могут быть буквы, знаки препинания, цифры, пробелы и символы. Каждое слово…

Март 29 2024

Рынок Smart Lock: опубликован отчет об исследовании рынка

Термин «Рынок Smart Lock» относится к отрасли и экосистеме, связанной с производством, распространением и использованием…

Март 27 2024

Что такое шаблоны проектирования: зачем их использовать, классификация, плюсы и минусы

В разработке программного обеспечения шаблоны проектирования являются оптимальным решением проблем, которые часто возникают при разработке программного обеспечения. Я как…

Март 26 2024

Технологическая эволюция промышленной маркировки

Промышленная маркировка — это широкий термин, охватывающий несколько методов, используемых для создания стойких знаков на поверхности…

Март 25 2024

Читайте «Инновации» на вашем языке

Инновационный бюллетень
Не пропустите самые важные новости об инновациях. Зарегистрируйтесь, чтобы получать их по электронной почте.

Следуйте за нами