Вступление

В другом уроке мы собрали вместе React.js и Phoenix. Одна из моих любимых вещей в Phoenix, особенно с обновленной версией Brunch, - это то, насколько просто интегрировать практически любую интерфейсную структуру непосредственно в ваше приложение. Сегодня мы рассмотрим, как настроить и запустить базовое приложение с помощью очень простого приложения Vue.js!

Текущие версии

Phoenix: v1.1.4

Vue.js: v1.0.16

NPM: 3.6.0 (Очень важно, этот процесс не будет работать с NPM 2.x; вам необходимо использовать 3.x)

NodeJS: v5.6.0

Поздний завтрак: v2.1.x, v2.2.x, v2.3.2 + (v2.3.0 прерывается с сообщениями об ошибках о том, что NODE_ENV не определен, поэтому убедитесь, что вы используете одну из версий I в списке!), v2.4.x

Создание нашего проекта

Прежде чем делать что-либо еще, мы начнем с создания нашего проекта Phoenix. Это потребует от нас установки последней версии Phoenix (v1.1.4 +) через локальный шестнадцатеричный код, прежде чем что-либо еще.

$ mix local.hex
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

Если вы уже устанавливали Phoenix раньше, он спросит вас, хотите ли вы переопределить какие-либо существующие пакеты. Просто скажи здесь "да". Затем мы создадим новое приложение Phoenix:

$ mix phoenix.new pxvue

Идите дальше и ответьте "да" на получение / установку зависимостей. В этот раз они нам понадобятся! Теперь перейдите в этот каталог, и мы перейдем к установке наших зависимостей NPM.

$ cd pxvue

Установка наших зависимостей и конфигурации NPM

Мы начнем с невероятно простого и просто установим Vue.js как нашу единственную зависимость. Мы также могли бы включить такие вещи, как vue-router и аналогичные пакеты, если бы хотели пойти по маршруту SPA, но пока давайте упростим нашу жизнь.

$ npm install --save vue

После этого нам нужно будет изменить наш файл brunch-config.js в корневом каталоге нашего приложения Phoenix для поддержки новых модулей, которые мы установили. Нам нужно внести установленные модули npm в белый список в разделе конфигурации npm, чтобы поздний завтрак знал, что мы собираемся использовать «vue»:

npm: {
    enabled: true,
    // Whitelist the npm deps to be pulled in as front-end assets.
    // All other deps in package.json will be excluded from the bundle.
    whitelist: ["phoenix", "phoenix_html", "vue"]
}

Сохраните этот файл и запустите команду сборки brunch, чтобы мы были уверены, что все в порядке (технически, при первом запуске сервера Phoenix это произойдет в любом случае, но если вы уже запустили свой сервер, этого не произойдет, если только вы что-то модифицируете, что мы и сделаем позже):

$ brunch build

Важное примечание о версиях NPM

В этом руководстве предполагается, что вы используете NPM 3.x. Если вы используете NPM 2.x, вы столкнетесь с проблемами, пытаясь собрать все вместе, как было предложено несколькими людьми. Для получения дополнительной информации перейдите по ссылке https://github.com/phoenixframework/phoenix/issues/1410#issuecomment-166001866. Особая благодарность Мэтту Видманну и Фабио Аките за указание на это в сообщении о React.js!

Написание примера компонента

Теперь давайте настроим наше приложение Phoenix, чтобы мы могли добавить на нашу страницу небольшой компонент Hello World vue. Откройте web / templates / page / index.html.eex и замените содержимое всего файла на:

<div id="hello-world">
  {{message}}
</div>

Наконец, вам нужно добавить следующий фрагмент кода в конец файла web / static / js / app.js:

import Vue from "vue";
new Vue({
  el: "#hello-world",
  data: {
    message: "Hello World"
  }
});

Оно работает!

Запустите сервер, если вы еще этого не сделали:

$ iex -S mix phoenix.server

И на главной странице вы должны увидеть что-то вроде следующего:

Поздравляю! Теперь у вас есть рабочий компонент Vue.js внутри приложения Phoenix почти без дополнительных усилий или усилий! Наслаждаться! Если вы хотите просто проверить репо для этого в качестве отправной точки, вы можете найти его по адресу: https://github.com/Diamond/pxvue