vueport
v0.1.5
Одно файловые компоненты и SSR для Rails с Vue JS и WebPack
Если бы я снова построил этот драгоценный камень, я бы, вероятно, использовал бы что -то вроде mini_racer, чтобы отображать компоненты VUE на том же сервере, в отличие от введения HTTP -запроса и инфражизационных накладных расходов. Если кто -то все еще использует этот драгоценный камень и хочет выполнить эту работу, он должен быть относительно простым путем изменения класса рендеринга.
VuePort предоставляет ваше приложение Rails современным, компонентизированным подходом к разработке пользовательского интерфейса с помощью WebPack и Vue.js для включения отдельных файлов, реактивных компонентов, отображаемых на сервере, а также клиентской и бесшовной интеграции с вашими рельсами.
Взгляните на документацию Vue.js на единичных компонентах для получения дополнительной информации о этой стороне вещей.
Vueport Piggyback на драгоценном камне WebPackRails, чтобы получить настройку WebPack с рельсами, поэтому проверьте это для получения дополнительной информации.
Здесь.
Добавьте эту строку в Gemfile вашего приложения:
gem 'vueport'А затем выполнить:
$ bundle
Или установите его самостоятельно как:
$ gem install vueport
Тогда просто беги
rails generate vueport:installЧтобы начать все, что вам нужно, чтобы начать (это установит WebPackRails, а также все, что нужно VuePort на вершине).
Чтобы запустить ваше приложение, выполнить
bundle exec foreman start -f Procfile.devЧтобы загрузить Dev Server WebPack и приложение Rails!
Убедитесь, что запустить npm run compile (или yarn run compile ) как часть процесса развертывания для производства. Это компилирует производственную версию вашего клиентского пакета, а также компиляция пакета на стороне сервера для нашего приложения Node JS для использования.
В производстве мы отправляем HTTP -запросы на базовый сервер Nodejs для отображения нашего контента. Чтобы одновременно запустить приложение Rails и Node Server, используйте Procfile .
Оберните свое приложение в помощник vueport , чтобы отобрать ваши компоненты. Например, в вашем application.html.erb :
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
</ body >Он также может принять один аргумент. Например:
< body >
<%= vueport yield %>
</ body >Добавьте помощников WebPack Rails в свой макет, чтобы включить ваш JavaScript и CSS (см. Для получения дополнительной информации см. WebPackrails Readme).
Убедитесь, что вы разместите JS -Point после помощника Vueport!
Например:
< head >
<%= stylesheet_link_tag * webpack_asset_paths ( 'application' , extension : 'css' ) %>
</ head >
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
<%= javascript_include_tag * webpack_asset_paths ( "application" , extension : 'js' ) %>
</ body >Из коробки Vueport ожидает, что ваши компоненты будут жить в приложениях/компонентах и компилируют активы для Public/Webpack . Чтобы изменить их, вам нужно изменить как конфигурация WebPack (в config/webpack.config.js и config/webpack.server.js ), так и конфигурация приложения Vue Gem. Для этого в инициализаторе DO:
Vueport . configure do | config |
config [ :server_port ] = 3001
endОзнакомьтесь с GEM WebPackRails для получения информации о его конфигурации.
Что дает вам Vueport, это фактически 3 приложения:
Они были созданы таким образом, чтобы они могли быть построены для производства полностью отдельно, чтобы избежать сложных трубопроводов - например, вы можете запустить эти 3 приложения, используя Docker, полностью отдельно, что означает, что вам не нужны рубин и узел в одном Dockerfile.
Для получения дополнительной информации о том, как WebPack был интегрирован с Rails, ознакомьтесь с этим разделом WebPack Rails Readme.
Чтобы включить рендеринг на стороне сервера, я создал простое приложение Nodejs, которое использует визуализатор сервера VUE, чтобы отобразить содержимое страницы по каждому запросу. Чтобы включить регидрацию на стороне клиента, мы также прикрепляем исходное содержимое представления в шаблоне для экземпляра Vue на стороне клиента.
SSR включен только в производстве.
Мой опыт работы со многими современными библиотеками пользовательского интерфейса и неотъемлемой частью интеграции их с приложениями Rails (особенно React and Vue JS), приведет меня к выводу, что Vue JS, кажется, более объясняется, и батареи «включают» библиотеку при создании компонентов для рельсов.
Я регулярно использую реагирование для спа -салонов и люблю его функциональную философию, но для написания компонентов, чтобы вписаться в фронт рельсов, Vue, похоже, обеспечивает мне наименьшую сложность и, кажется, проще всего рассуждать о рубиновых разработчиках.
Для совместного сравнения Vue.js и реагирования проверьте это.
Я получаю, что ошибка Could not load compiled manifest from /app/public/webpack/manifest.json в производстве
Вам нужно будет запустить npm run compile как часть вашего процесса сборки, чтобы генерировать производственный пакет JS (эта ошибка генерируется WebPackRails)
После проверки репо, запустите bin/setup для установки зависимостей. Затем запустите rake spec , чтобы запустить тесты. Вы также можете запустить bin/console для интерактивной подсказки, которая позволит вам экспериментировать.
Чтобы установить этот драгоценный камень на локальную машину, запустите bundle exec rake install . bundle exec rake release выпустить новую версию, обновите номер версии .gem version.rb .
Отчеты об ошибках и запросы на тягу приветствуются на GitHub по адресу https://github.com/samtgarson/vueport. Этот проект предназначен для безопасного, гостеприимного пространства для сотрудничества, и ожидается, что участники будут придерживаться Кодекса поведения завета участника.
Драгоценный камень доступен в качестве открытого исходного кода в соответствии с условиями лицензии MIT.
