Налаштування вашого першого сайту за допомогою Laravel Elixir та Vueify, Laravel по-українськи

1. Знайомтесь, Vue.js
2. Застосування Vue у стандартних проектах
3. Знайомтесь, Vueify
4. Що таке Laravel Elixir?

4.1. Використання Laravel Elixir та Vueify
4.2. Імпортування пакетів
4.3. Вставка в HTML-сторінку
4.4. Створення першого компонента
4.5. Включення компонентів до інших компонентів

Знайомтесь, Vue.js

То що таке Vue.js?

У нього двостороння прив'язка даних, як у Ember та Angular.

Він легкий і може бути використаний для простого прикраси компонента як Knockout.

Він може бути поміщений на сторінку з нульовою складністю складання, але також легко його частини можна зібрати докупи для підтримки імпорту ES2015.

У нього швидка прив'язка даних, що дозволяє використовувати властивості, що обчислюються, і вона безкоштовна для будь-яких об'єктів даних, що передаються в нього, як в React.

Він надає інструменти для поділу вашого коду на компоненти, які можна компонувати як автономні файли, як React.

Він має маршрутизатор, тому ви можете використовувати його для односторінкових додатків, але він також добре підходить для одноразових компонентів і прототипування.

Застосування Vue у звичайних проектах

Розглянемо, як працювати з Vue у найпростішому випадку (без Elixir та Vueify): fiddle.

У цьому прикладі ми робимо дві речі: перша - імпортуємо Vue з CDN, друга - створюємо div (PHP #example), який використовуватимемо як наш контейнер Vue, і пишемо в нього трохи шаблонного коду. І третє – ми створюємо кореневий екземпляр Vue та прив'язуємо його до цього контейнера.

В результаті Vue передає об'єкт data вшаблон, визначений у поданні, та рендерит його.

Далі можна робити багато всього, але ми зробимо великий стрибок – додамо систему збирання та систему компонентів Vueify. Ці інструменти не є обов'язковими для розробки на Vue, але коли ваш додаток та компоненти досягнуть певного рівня складності, ви відкриєте для себе величезні можливості цих інструментів.

Тепер ми перейдемо на синтаксис компонент-в-одному-файлі Vue в стилі JSX за допомогою Vueify. А також будемо використовувати систему складання Gulp з Laravel Elixir, щоб підключити наші залежності, зібрати наші скрипти та отримати доступ до синтаксису ES2015 за допомогою Babel.

Знайомтесь, Vueify

Перед зануренням в Elixir, давайте подивимося на Vueify. Ось простий файл Vueify, який ми назвемо Hero.vue:

І будемо використовувати його в HTML ось так:

Так ми розмістили екземпляр нашого компонента Hero на нашій сторінці.

Що таке Laravel Elixir?

Перейдемо до нашої системи збирання.

Один з основних недоліків React – складність інструментів для збирання, які вам потрібно вивчити для роботи з ним. Раніше ми розглянули Webpack (Розпакування Webpack), але не можна сказати, що він особливо простий у вивченні.

Ви можете використовувати Vue без будь-яких складних інструментів, але для великих додатків часто потрібні складніші системи, яким часто потрібні складніші інструменти.

Gulp та імпорт ES2015 – перші кроки до спрощення нашого життя. Імпорт ES2015 стандартизує процес імпортування модулів між нашими компонентами. А Gulp — найкращий інструмент для збирання, з яким я коли-небудь працював (так, я читав ці статті про те, як складальні скрипти NPM змінили світ, і я пробував використати їх, і я хотів би назавжди стерти зі своєї головиспогади про цей кошмар).

Laravel Elixir - інструмент для складання для PHP-фреймворку Laravel, але він також чудово працює і поза Laravel. Це обгортка навколо Gulp, яка дозволяє просто і безболісно виконувати всі завдання розробки, які характерні для переважної більшості веб-додатків.

Розглянемо такий Gulp-файл:

А ось той самий файл при використанні Elixir:

Найважливіше — ми отримуємо Babel (для ES2015) безкоштовно, а Vueify недорого, тому можемо писати прості, роздільні компоненти та не мати проблем, коли справа доходить до їхнього з'єднання воєдино.

Отже, зробимо це.

Elixir має великий список залежностей, через його великі можливості. Якщо ви професійний Vue-розробник, ви можете зібрати власні більш легкі gulpfile.js і package.json . Але я рекомендую не робити цього, доки ви не знайдете дуже вагому причину.

Використання Laravel Elixir та Vueify

Для початку давайте візьмемо Elixir у наш новий проект.

Імпортування пакетів

Якщо це Laravel-проект, то у вас вже є Elixir, і ви можете пропустити багато цих початкових кроків. Основне необхідне вам налаштування - додати laravel-elixir-vueify до вашого package.json і встановити його, і додати завдання browserify до вашого gulpfile.js і вказати його у файлі app.js . Решта практично збігається.

Відкрийте ваш package.json і заповніть його таким:

Де ж у цьому списку Vue та Vueify? Ми використовуємо плагін для Elixir під назвою laravel-elixir-vueify, який підключає їх як залежність.

Тепер збережемо його та встановимо наші пакети:

Це займе якийсь час, тому почнемо писати наш Gulp-файл. Створіть файл з ім'ям gulpfile.js та вставте внього це:

Даний файл app.js передбачає, що вихідні дані будуть в resources/assets/js/app.js , а результат буде в public/js/app.js . Це можна налаштувати пізніше, а поки давайте просто створимо ці файли/папки:

Давайте запустимо його вперше (при цьому вам буде створена цільова папка):

Тепер у вас є (практично) порожній файл app.js у public/assets/js . У цей файл ви будете вмикати свій HTML.

Вставка в HTML-сторінку

Створимо компонент Vue і вставимо його в нашу сторінку. Спочатку створимо public/index.html:

І включимо його в наш resources/assets/js/app.js :

Замість того, щоб запускати sh gulp щоразу, коли ми захочемо скомпілювати наші файли, давайте просто відкриємо нову вкладку або вікно або панель у нашому терміналі та виконаємо sh gulp watch .

Тепер ви можете відкрити index.html у браузері, і там ви. нічого не побачите. Незабаром ми це змінимо.

Створення першого компонента

Давайте створимо компонент для нашої сторінки. Почнемо з профілю користувача.

Спочатку створимо файл з ім'ям Profile.vue у resources/assets/js. Заповнимо розділи компонента:

Тепер помістимо цей компонент у app.js:

І нарешті, використовуємо компонент в index.html :

Зберігаємо, даємо запуститися нашому gulp, і несподівано наш компонент з'являється на сторінці:

Зараз ми не будемо розглядати всі можливості Vue, але в майбутньому ви знайдете більше статей про використання Vue тут та на моїй особистій сторінці. А поки що подивимося, що у нас вже є: за допомогою кількох рядків коду ми маємо систему складання, що повністю підтримує ES2015, з Vueify, і вона працює прямо на нашій сторінці.

Перед тим, як закінчити, розглянемо використання PHP importу компоненті.

Включення компонентів до інших компонентів

Створимо невеликий компонент зображення профілю. Додамо новий файл до resources/assets/js/Picture.vue :

Тепер імпортуємо його в Profile.vue:

Та-дам! Наше зображення тепер показано на профілі.

Насолоджуйтесь! Розвивайтеся з vueify.

Як ви вважаєте, чи корисний цей матеріал? Та ні

Коментарі (5)

Знайшов відповідь на запитання тут: http://initcode.info/how_to_add_dynamic_componentspartials_in_vue_js

В останніх версіях Laravel з'явилася підтримка Webpack. Чи можна приклад підключення Vue для зв'язування Laravel + Elixir + Webpack?

Все дуже чудово!

Статистика: Символів - 9 868/8 248 без пробілів (6 745/5 691 без коду):, слів - 1 055