Введение
Каждое утро появляется новая среда JavaScript, которая пытается решить какую-то проблему. Если ваше приложение работает на платформе, отличной от JS, вы должны быть спокойны, не имея дело с кучей пакетов, плавающих в реестре npm. Но может быть случай, когда вы хотите построить мост между вашими устаревшими приложениями и новыми платформами JS. В этом посте я хотел бы рассказать, как я интегрировал VueJS в Ruby on Rails.
Rails (4.x+) начал поставляться с sprockets — библиотекой Ruby для компиляции и обслуживания статических ресурсов (js, css, изображений и т. д.). Он отлично справляется с обработкой ванильного JavaScript и jQuery, но на сегодняшний день не может обрабатывать версию ES6. И это затрудняет поддержку таких фреймворков, как ReactJS, VueJS и т. д., поскольку они могут содержать участки кода, написанные на ES6. Один из способов обойти это — использовать гем Webpacker. Это Ruby-версия пакета webpack для приложений JavaScript, которые находятся в приложении Rails. Это помогает компилировать и связывать код JavaScript (даже в ES6) и делает его доступным в виде статических ресурсов вместе с конвейером ресурсов из звездочек.
Требования
Поскольку мы в основном сосредоточены на работе с Webpacker, требования будут такими же, как и для этого гемма.
Ruby 2.2+
Rails 4.2+
Node.js 6.0.0+
Yarn 0.25.2+
Разработка
В этом разделе я покажу, как я создал небольшой компонент Vue и интегрировал его в приложение Rails.
Создание компонента Vue
Для этого примера, поскольку мой компонент достаточно мал, я решил использовать компонент с одним файлом (SFC). Компонент представляет собой простую панель поиска, состоящую из текстового поля ввода и кнопки. Когда пользователь вводит некоторый текст и нажимает кнопку (или нажимает клавишу ввода), он обращается к API, заданному как свойство компонента, и извлекает набор результатов. Здесь — репозиторий git для компонента.
Приложение Rails
Создайте приложение rails с помощью стандартного генератора. Для удобства я использовал slim gem в качестве шаблонизатора в своем приложении rails и webpacker gem для интеграции с фреймворком VueJS.
Установите компонент Vue в приложении rails.
npm install --save
https://github.com/rahulakurati/vue_search_bar
Приведенная выше команда должна установить компонент vue в приложение rails, и соответствующая запись должна быть там в файле package.json
проекта.
Гем веб-упаковщика Rails устанавливает каталог app/javascript
для размещения всех связанных файлов Javascript для компонентов. Это отличается от того, который по умолчанию поставляется Rails для конвейера активов, который находится в app/assets
.
Я создал файл search_box.js
в каталоге app/javascript/packs
, чтобы загрузить компонент Vue, который мы установили ранее, и привязать его к объекту окна.
import Vue from 'vue/dist/vue.esm' import SearchBox from 'vue_search_bar/src/SearchBox' window.loadSeachBoxComponent = function() { new Vue({ el: '#searchbox', components: {'search-box': SearchBox} }); };
Перейдите к тонкому файлу, в котором вы хотите, чтобы компонент отображался. В этом примере у меня есть частичный файл _header.html.slim
, в котором я хочу отобразить свой компонент Vue.
В строке № 4 я включил компонент vue, следуя синтаксису slim. В строке № 9 вызывается функция javascript, которую мы создали ранее, для загрузки экземпляра Vue компонента и привязки его к div
с идентификатором #searchbox
в строке № 3.
Теперь приложение rails готово для визуализации компонента Vue. Запустите команду rails s
, чтобы запустить приложение rails на локальном хосте.
На изображении выше панель поиска с надписью «Поиск по игре» — это наш компонент Vue, а кнопка справа с надписью «Добавить пользователя в игру» — это обычный HTML-элемент.
В приведенном выше примере я просто хотел продемонстрировать, как использовать гем Rails Webpacker и интегрировать приложение rails с новейшей внешней средой, такой как VueJS. Надеюсь, это полезно. Пожалуйста, дайте мне знать, если какие-либо вопросы по комментариям.