Для разработки веб-приложений широко используется инструмент vuejs, и в этой статье мы увидим, как установить и использовать его с Laravel. Фреймворк Vue.js был defiнито прогрессивная структура потому что он специализируется на создании представлений HTML и позволяет легко интегрироваться с компонентами других библиотек и проектов.
Успех Vue.js также обусловлен выбором Laravel предложить его в качестве внешнего интерфейса, что привело к выпуску версии 2.0.
Первым шагом, конечно же, является создание нового проекта в 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
.
Когда закончите, если все работает нормально, вы увидите что-то вроде этого:
После подготовки проекта 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 установлен.
В файле 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завершить некоторые параметры приложения, такие как данные и поведение, в нашем случае:
div
defiзакончил в htmlКак только объект создан, Vue
приобретает div
con id vue-app
и заботится о замене заполнителя {{ text }}
со значением, содержащимся в объекте данных. Конечно, этот объект может содержать более одного свойства, даже разных типов: допустимы числа, массивы и другие вложенные объекты.
Помимо этой замены, Vue также активировал свой движок и сделал приложение отзывчивым, т. е. любое изменение свойства text приведет к мгновенному обновлению соответствующего элемента в HTML.
Чтобы перейти ко второй пробной версии, вам сначала нужно создать экземпляр приложения для создания нового компонента. Вы откроете 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
Вам также может быть интересно ...
Символы — это отдельные элементы текста. Это могут быть буквы, знаки препинания, цифры, пробелы и символы. Каждое слово…
Термин «Рынок Smart Lock» относится к отрасли и экосистеме, связанной с производством, распространением и использованием…
В разработке программного обеспечения шаблоны проектирования являются оптимальным решением проблем, которые часто возникают при разработке программного обеспечения. Я как…
Промышленная маркировка — это широкий термин, охватывающий несколько методов, используемых для создания стойких знаков на поверхности…