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

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

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

Так что же такое Vue.js?

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

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

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

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

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

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

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

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

Вы можете узнать больше о Vue из статьи автора фреймворка: Vue.js: знакомимся (снова). Также посмотрите бесплатную серию ларакастов по Vue.

Применение 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:

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 файл app.js вот так:

jsimport Vue from `vue`
import Hero from `./Hero.vue`

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

И будем использовать его в HTML вот так:

xml<!--head, и т.д., включая загрузку упомянутого app.js-->
<hero></hero>

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

Что такое Laravel Elixir?

Перейдём к нашей системе сборки.

Один из основных недостатков React — сложность инструментов для сборки, которые вам нужно изучить для работы с ним. Ранее мы рассмотрели Webpack ( Распаковка Webpack ), но нельзя сказать, что он особенно прост в изучении.

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

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

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

Рассмотрим такой Gulp-файл:

jsvar 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:

jsvar elixir = require('laravel-elixir');

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

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

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

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

Использование Laravel Elixir и Vueify

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

Импортирование пакетов

shmkdir vueify-project
cd vueify-project
touch package.json

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

Откройте ваш package.json и заполните его чем-то таким:

js{
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^4.0.0",
    "laravel-elixir-vueify": "^1.0.0"
  }
}

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

Теперь сохраним его и установим наши пакеты:

shnpm install

Это займёт какое-то время, поэтому давайте начнём писать наш Gulp-файл. Создайте файл с именем gulpfile.js и вставьте в него это:

jsvar elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

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

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

shmkdir -p resources/assets/js
touch resources/assets/js/app.js

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

shgulp

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

Вставка в HTML-страницу

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

xml<!DOCTYPE html>
<html>
<body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
</body>
</html>

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

jsimport Vue from 'vue';

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

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

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

Создание своего первого компонента

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

Сначала создадим файл с именем Profile.vue в 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>

Теперь поместим этот компонент в app.js:

jsimport Vue from 'vue';
import Profile from './Profile.vue';

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

И наконец, используем компонент в index.html:

xml<!DOCTYPE html>
<html>
<body>
    <div id="app">
        <profile></profile>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>

Сохраняем, даём запуститься нашему gulp, и неожиданно наш компонент появляется на странице:

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

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

Включение компонентов в другие компоненты

Создадим небольшой компонент для изображения профиля. Добавим новый файл в 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>

Теперь импортируем его в 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>

...

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

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