Введение.

Я использовал примеры с официального сайта, чтобы продемонстрировать работу замечательной библиотеки Vue.js.

Этот проект на GitHub можно посмотреть здесь

Демонстрацию этого проекта можно посмотреть здесь

Обзор Vue.js фреймворка

Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.

Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.

Ресурсы

Vue.js (JavaScript framework): Документация; API; Сравнение с другими фреймворками; Примеры; Components & Libraries
jQuery: Документация
Bootstrap 3: Документация
Firebase (Realtime Database): Документация; Примеры; Консоль
HackerNews: API
A Markdown parser and compiler: GitHub

Работа приложения

Используются реактивные возможности построения пользовательского интерфейса.
Используются HTML-шаблоны для создания представлений веб-приложений, которые состоят из различных частей.
Сборка модулей осуществляется по технологии Asynchronous module definition (AMD). Для обеспечения этой технологии используется библиотека RequireJS которая является загрузчиком JavaScript файлов и модулей.
Используется маршрутизация для создания одностраничного приложения (SPA, Single-Page Applications).
Реализована локализация двух языков: английского и русского.
Для работы с локальными данными в броузере используется библиотека jStorage это кросс-броузерная база данных для хранения значений в виде (key-value).
Для хранения данных на серверной стороне используется база данных Firebase.
Для построения пользовательского интерфейса используется Bootstrap 3, это один из популярных HTML, CSS, и JS фреймворков для разработки интерактивных мобильных проектов в Интернете.

Установка приложения

Предварительные требования

Apache2, Nginx веб сервер или похожие.

Развертывание

Клонировать или загрузить vue-examples проект с GitHub.
Сконфигурировать веб сервер так чтобы входная точка была /index.html.
Доступ к URL вашего проекта с помощью веб-браузера (пр. http://vue-examples/index.html).

Это приложение демонстрирует работу следующих Vue.js примеров:

TodoMVC

Пример использует Firebase как базу данных на серверной стороне. Это полнофункциональная реализация TodoMVC шаблона, выполненная с максимальной эффективностью и минимальным кодом.

Markdown Editor

Пример реализует простой Markdown редактор. Markdown это язык разметки текста в Интернете. Вы контролируете отображение документа, форматирование слов жирным шрифтом или курсивом, добавление изображений и создание списков - это просто немногие из вещей, которые мы можем сделать с помощью Markdown.

GitHub Commits

Пример получает последние Silex-MVC зафиксируемые данные из API GitHub и отображает их как список. Вы можете переключаться между ведущим и другими ветвями. GitHub - это платформа для хостинга кода, для контроля версий и совместной работы. Это позволяет вам и другим разработчикам совместно работать над проектами из любого места.

Firebase + Validation

Пример использует Firebase как базу для хранения данных на серверной стороне и обеспечивает синхронизацию данных между клиентами в реальном времени (вы можете попробовать открыть его на нескольких вкладках браузера). В добавок, он выполняет валидацию вводимых значений с помощью вычисляемых свойств и тригеров, а так же CSS переходы при добавлении / удалении элементов.

Sort Grid Component

Это пример создания компонента таблицы с возможностью сортировки и фильтрации внешних данных.

Hacker News

Это клон HackerNews, построенный на базе официального Firebase API. С помощью Firebase мы публикуем общедоступные данные HackerNews в реальном времени.