Введение.

Я использовал свободный шаблон Osahan – Free Responsive Business Bootstrap Template, чтобы продемонстрировать работу замечательной библиотеки Vue.js.

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

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

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

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

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

Ресурсы

Vue.js (JavaScript framework): Документация; API; Сравнение с другими фреймворками; Примеры; Components & Libraries
Vuex is library for Vue.js applications: Документация
Vue Router is library for Vue.js applications: Документация
jQuery: Документация
Bootstrap 3: Документация
jQuery plugin Bootstrap Validation: Документация; GitHub
jQuery plugin Owl Carousel 2: Документация; GitHub
Font Awesome - the iconic font and CSS toolkit: Документация
Animate.css - library of CSS animations: GitHub; Примеры

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

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

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

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

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

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

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

Оптимизация

Чтобы оптимизировать, выполните:

node app/js/r.js -o build_require.js

С помощью этой команды создается оптимизированная версия проекта в /public директории. Файл main.js будет оптимизирован для включения всех его зависимостей.

Большую информацию по оптимизации можно поосмотреть: здесь

Большую информацию по использованию requirejs можно помотреть: здесь

Структура приложения

Vue.js - Business Light проект имеет файловую структуру, показанную ниже см. пр.1.

пр.1



    |-- app/
    |  |-- api/             # Получение данных с внешних источников
    |  |-- bin/             # PHP код для работы с формой
    |  |-- components/      # Отдельные компоненты проекта
    |  |-- config/          # Базовые параметры конфигурации
    |  |-- css/             # CSS - каскадные стили
    |  |-- filters/         # Модификаторы строк
    |  |-- images/          # Изображения
    |  |-- js/              # JavaScript файлы
    |  `-- store/           # Хранилище данных
    |
    |-- public/             # Оптимизированная версия сайта
    |
    |-- .firebaserc         # FireBase конфигурация
    |-- .gitattributes
    |-- .gitignore
    |-- build_require.js    # Конфигурация для оптимизации проекта
    |-- env.example.js      # Пример файла окружения
    |-- env.js              # Файл окружения
    |-- firebase.json       # FireBase конфигурация
    |-- index.html          # Входная точка приложения (html)
    |-- LICENSE.md
    |-- main.js             # Входная точка приложения (JavaScript)
    |-- package.json
    `-- README.md

Конфигурация

env.js

Файл env.js должен находиться в корне проекта, если он отсутствует, то его нужно создать на основе примера файла env.example.js, иначе приложение будет выдавать ошибку. В файле env.js устанавливаются пользовательские значения параметров вашей конфигурации, которые переустанавливают базовые параметры конфигурации.

Базовые параметры вашей конфигурации располагаются в папке app/config/env/. В этой папке расположены следующие файлы конфигурации:

production.js
development.js
testing.js

В этих файлах устанавливаются базовые параметры конфигурации в зависимости от режима работы приложения: development, production, testing.

Конфигурация файла env.js см. пр.2.

пр.2


    define([], function () {
        var config = {
            env: 'testing',// development, production, testing
            debug: true,
            api: {
                base_url: 'http://localhost:8888',
                defaultRequest: {
                    headers: {
                        'X-Requested-With': 'rest.js',
                        'Content-Type': 'application/json'
                    }
                }
            },
            personal_data: {
                copyright: '© 2016 OSAHAN - All Rights Reserved',
                designed_with: 'Osahan Studio',
                designed_with_url: 'https://www.facebook.com/iamgurdeeposahan',
                contact: {
                    location: '795 Folsom Ave, Suite 600',
                    phone: '+01 234 567 890',
                    email: 'company@company.com',
                    website: 'www.yourdomain.com'
                },

                ...

            },
        }
        return config;
    })

Точка входа main.js

Точкой входа в приложение является файл main.js. В нем происходит конфигурация requirejs, настройка путей приложения с помощью библиотеки Vue-Router, создание самого приложения App см. пр.3.

пр.3


    requirejs.config({
        baseUrl: '.',
        paths: {
            css: 'app/js/requirejs/css.min', //requirejs plugin for load css
            text: 'app/js/requirejs/text', //requirejs plugin for load text
            lodash: 'app/js/lodash/lodash.min', // Standard library
            es6_promise: 'app/js/es6-promise/es6-promise.min',
            vue:  'app/js/vue/vue', // 'https://unpkg.com/vue/dist/vue',
            vuex:  'app/js/vue/vuex', // 'https://unpkg.com/vuex/dist/vuex',
            vue_router: 'app/js/vue/vue-router', // 'https://unpkg.com/vue-router/dist/vue-router',
            app_comp: 'app/components/app/app',
        },
        shim: {
            app_comp: {
                deps: ['lodash', 'es6_promise']
            },
        }
    });

    require([
        // Vue.js
        'vue',
        // Vue-Router
        'vue_router',

        ...

        // Create the router instance and pass the `routes` option
        var router = new VueRouter({
            routes: routes
        });

        // Create and mount the root instance.
        var app = new App({
            router: router
        }).$mount('#app');
    });