Настройка вашего первого сайта на Vue.js с помощью Laravel Elixir и Vueify

Статистика: Символов — 9 868/8 248 без пробелов (6 745/5 691 без кода):, слов — 1 055
Разметка: Wiki
{{TOC}}

{{Image /packages/proger/habravel/uploads/352-vue-elixir-963x401.png, height=100px}}

Складывается ощущение, что каждый день появляется новый JavaScript фреймворк. Мы в Tighten не успели поработать с каждым из них, но опробовали достаточно большое количество, и наряду с такими, в которых нам чего-либо не хватает, мы нашли один, поистине превосходный - Vue.js. На самом деле он не новый, но недавно он начал набирать обороты, и он отлично подошёл для многих наших проектов.

==Знакомьтесь, Vue.js==
Так что же такое Vue.js?

Это JavaScript фреймворк, такой как React, Ember или Angular.

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

Он лёгкий и может быть использован для простого украшения компонента, как Knockout.

Он может быть помещён на страницу с нулевой сложностью сборки, но также легко его части можно собрать воедино для поддержки импорта ES2015.

У него быстрая привязка данных, позволяющая использовать вычисляемые свойства, и она бесплатна для любых объектов данных, передаваемых в него, как в React.

Он предоставляет инструменты для разделения вашего кода на компоненты, которые можно компоновать как автономные файлы, как в React.

У него есть маршрутизатор, поэтому вы можете использовать его для одностраничных приложений, но он также хорошо подходит для одноразовых компонентов и прототипирования.

Структуры данных его ядра простые и работают с объектами POJO (Plain Old JavaScript Objects); структура вашего приложения может быть сколь угодно простой или сложной.

Вы можете узнать больше о Vue из статьи автора фреймворка: ((http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ Vue.js: знакомимся (снова) )). Также посмотрите ((https://laracasts.com/series/learning-vue-step-by-step бесплатную серию ларакастов по Vue)).

==Применение Vue в обычных проектах==
Рассмотрим, как работать с Vue в простейшем случае (без Elixir и Vueify): ((http://jsfiddle.net/mattstauffer/rLpsr92c/1/ fiddle)).

В этом примере мы делаем две вещи: первая - импортируем Vue из CDN, вторая - создаём div (%%#example%%), который будем использовать как наш контейнер Vue, и пишем в него немного шаблонного кода. И третье - мы создаём корневой экземпляр Vue и привязываем его к этому контейнеру.

В результате Vue передаёт объект %%(t)data%% в шаблон, определённый в представлении, и рендерит его.

Дальше можно делать много всего, но мы сделаем большой скачок - добавим систему сборки и систему компонентов Vueify. Эти инструменты не //обязательны// для разработки на Vue, но когда ваше приложение и компоненты достигнут определённого уровня сложности, вы откроете для себя огромные возможности этих инструментов.

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

==Знакомьтесь, Vueify==
Перед погружением в Elixir, давайте посмотрим на Vueify. Вот простой файл Vueify, который мы назовём %%(t)Hero.vue%%:
%%(js)
<template>
  <div class="hero">
    {{ message }}
  </div>
</template>

<script>
export default {
  data () { /* ES2015 эквивалент для: `data: function () {` */
    return {
      message: 'Hello World!'
    };
  }
};
</script>

<style>
.hero {
  background: #eee;
  padding: 1em;
}
</style>
%%

Это определение нашего компонента. Нам надо поместить его в наш основной JavaScript файл %%(t)app.js%% вот так:
%%(js)
import Vue from `vue`
import Hero from `./Hero.vue`

new Vue({
  el: 'body',
  components: { Hero }
});
%%

И будем использовать его в HTML вот так:
%%(html)
<!--head, и т.д., включая загрузку упомянутого app.js-->
<hero></hero>
%%

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

==Что такое Laravel Elixir?==
Перейдём к нашей системе сборки.

Один из основных недостатков React - сложность инструментов для сборки, которые вам нужно изучить для работы с ним. Ранее мы рассмотрели Webpack ( ((http://blog.tighten.co/unpacking-webpack Распаковка Webpack)) ), но нельзя сказать, что он особенно прост в изучении.

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

Gulp и импорт ES2015 - первые шаги к упрощению нашей жизни. Импорт ES2015 стандартизирует процесс импортирования модулей между нашими компонентами. А Gulp - лучший инструмент для сборки, с которым я когда либо работал (да, я читал эти статьи о том, как сборочные скрипты NPM изменили мир, и я пробовал использовать их, и я бы предпочёл навсегда стереть из своей головы воспоминания об этом кошмаре).

Laravel Elixir - инструмент для сборки для PHP-фреймворка Laravel, но он также прекрасно работает и вне Laravel. Это обёртка вокруг Gulp, которая позволяет просто и безболезненно выполнять все задачи по разработке, которые характерны для подавляющего большинства веб-приложений.

Рассмотрим такой Gulp-файл:
%%(js)
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    live reload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();

gulp.task('sass', function() {
    return gulp.src('resources/assets/sass/app.scss')
        .pipe(sass({
            style: 'compressed',
            source map: true
        }))
        .pipe(autoprefixer('last 2 version', 'i.e. 9', 'iOS 6'))
        .pipe(gulp.dest('public/css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(livereload(server))
        .pipe(notify({
            title: "Karani",
            message: "Styles task complete."
        }));
});
%%

А вот тот же файл при использовании Elixir:
%%(js)
var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass('app.css');
});
%%

Самое важное - мы получаем Babel (для ES2015) бесплатно, а Vueify недорого, поэтому можем писать простые, раздельные компоненты и не иметь проблем, когда дело доходит до их соединения воедино.

Итак, давайте сделаем это.

.(alert)
У Elixir большой список зависимостей, по причине его больших возможностей. Если вы профессиональный Vue-разработчик, вы можете собрать собственные более легковесные %%(t)gulpfile.js%% и %%(t)package.json%%. Но я рекомендую не делать этого, пока вы не найдёте очень вескую причину.

===Использование Laravel Elixir и Vueify===
Для начала давайте возьмём Elixir в наш новый проект.

===Импортирование пакетов===
%%(sh)
mkdir vueify-project
cd vueify-project
touch package.json
%%

.(alert)
Если это Laravel-проект, то у вас уже есть Elixir, и вы можете пропустить многие из этих начальных шагов. Основная необходимая вам настройка - добавить %%(t)laravel-elixir-vueify%% в ваш %%(t)package.json%% и установить его, и добавить задачу %%(t)browserify%% в ваш %%(t)gulpfile.js%% и указать его в файле %%(t)app.js%%. Всё остальное практически совпадает.

Откройте ваш %%(t)package.json%% и заполните его чем-то таким:
%%(js)
{
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^4.0.0",
    "laravel-elixir-vueify": "^1.0.0"
  }
}
%%

.(alert)
Где же в этом списке Vue и Vueify? Мы используем плагин для Elixir под названием %%(t)laravel-elixir-vueify%%, который подключает их в качестве зависимостей.

Теперь сохраним его и установим наши пакеты:
%%(sh)
npm install
%%

Это займёт какое-то время, поэтому давайте начнём писать наш Gulp-файл. Создайте файл с именем %%(t)gulpfile.js%% и вставьте в него это:
%%(js)
var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('app.js');
});
%%

Данный файл %%(t)app.js%% предполагает, что исходники будут в %%(t)resources/assets/js/app.js%%, а результат будет в %%(t)public/js/app.js%%. Это можно настроить позже, а пока давайте просто создадим эти файлы/папки:
%%(sh)
mkdir -p resources/assets/js
touch resources/assets/js/app.js
%%

Давайте запустим его в первый раз (при этом для вас будет создана целевая папка):
%%(sh)
gulp
%%

Теперь у вас есть (практически) пустой файл %%(t)app.js%% в %%(t)public/assets/js%%. В этот файл вы будете включать свой HTML.

===Вставка в HTML-страницу===
Давайте скорее создадим компонент Vue и вставим его в нашу страницу. Сначала создадим %%(t)public/index.html%%:
%%(html)
<!DOCTYPE html>
<html>
<body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
</body>
</html>
%%

И включим его в наш %%(t)resources/assets/js/app.js%%:
%%(js)
import Vue from 'vue';

new Vue({
  el: '#app'
});
%%

Вместо того, чтобы запускать %%(sh)gulp%% каждый раз, когда мы захотим скомпилировать наши файлы, давайте просто откроем новую вкладку или окно или панель в нашем терминале и выполним %%(sh)gulp watch%%.

Теперь вы можете открыть %%(t)index.html%% в браузере, и там вы... ничего не увидите. Скоро мы это изменим.

===Создание своего первого компонента===
Давайте создадим компонент для нашей страницы. Начнём с профиля пользователя.

Сначала создадим файл с именем %%(t)Profile.vue%% в %%(t)resources/assets/js%%. Заполним разделы компонента:
%%(js)
<template>
  <div class="profile">
    {{ name }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'Matt Stauffer'
    };
  }
};
</script>

<style>
.profile {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 2em;
    margin: 2em auto;
    min-height: 150px;
    padding: 2em;
    width: 300px;
}
</style>
%%

Теперь поместим этот компонент в %%(t)app.js%%:
%%(js)
import Vue from 'vue';
import Profile from './Profile.vue';

new Vue({
  el: '#app',
  components: { Profile }
});
%%

И наконец, используем компонент в %%(t)index.html%%:
%%(html)
<!DOCTYPE html>
<html>
<body>
    <div id="app">
        <profile></profile>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>
%%

Сохраняем, даём запуститься нашему gulp, и неожиданно наш компонент появляется на странице:
{{Image /packages/proger/habravel/uploads/352-profile-component-name-838x248.png, height=100px}}

Сейчас мы не станем рассматривать все возможности Vue, но в будущем вы найдёте больше статей об использовании Vue здесь и ((http://mattstauffer.co/ на моей личной странице)). А пока посмотрим, что у нас уже есть: с помощью нескольких строчек кода мы имеем систему сборки, полностью поддерживающую ES2015, с Vueify, и она работает прямо на нашей странице.

Перед тем как закончить, рассмотрим использование %%import%% в компоненте.

===Включение компонентов в другие компоненты===
Создадим небольшой компонент для изображения профиля. Добавим новый файл в %%(t)resources/assets/js/Picture.vue%%:
%%(js)
<template>
  <img class="profile-picture" :src="source">
</template>

<script>
export default {
  data () {
    return {
      source: 'http://loremflickr.com/80/80'
    };
  }
};
</script>

<style>
.profile-picture {
    border: 3px solid #fff;
    border-radius: 50%;
    float: right;
    width: 80px;
}
</style>
%%

Теперь импортируем его в %%(t)Profile.vue%%:
%%(js)
<template>
  <div class="profile">
    {{ name }}
    <picture></picture>
  </div>
</template>

<script>
import Picture from './Picture.vue';
export default {
  data () {
    return {
      name: 'Matt Stauffer'
    };
  },
  components: { Picture }
};
</script>

...
%%

Та-дам! Наше изображение теперь показано на профиле.
{{Image /packages/proger/habravel/uploads/352-profile-component-with-picture-429x224.png, height=150px}}

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