Введение.

Я использовал свободный шаблон Osahan – Free CV Resume/Vcard HTML5 Template, чтобы продемонстрировать работу замечательной библиотеки 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: Документация
jQuery plugin Owl Carousel 2: Документация; GitHub
jQuery plugin Magnific Popup: Документация; GitHub; Примеры
Font Awesome - the iconic font and CSS toolkit: Документация

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

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

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

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

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

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

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

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

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

пр.1



    |-- css/             # CSS - каскадные стили
    |-- images/          # Изображения
    |-- js/              # JavaScript файлы
    |-- templates/       # Шаблоны отдельных конпонентов сайта
    |
    |-- .firebaserc         # FireBase конфигурация
    |-- .gitattributes
    |-- .gitignore
    |-- firebase.json       # FireBase конфигурация
    |-- index.html          # Входная точка приложения (html)
    |-- LICENSE.md
    |-- main.js             # Входная точка приложения (JavaScript)
    `-- README.md

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

Точкой входа в приложение является файл main.js. В нем происходит конфигурация requirejs, компоновка приложения из отдельных компонентов, создание самого приложения App см. пр.2.

пр.2


    requirejs.config({
        baseUrl: '',
        paths: {
            css: "js/requirejs/css.min", //requirejs plugin for load css
            text: "js/requirejs/text", //requirejs plugin for load text
            vue: 'https://unpkg.com/vue/dist/vue'
        },
        shim: {
        }
    });

    require(['vue',
        'text!templates/preloader.html',
        'text!templates/phone.html',
        'text!templates/socials.html',
        'text!templates/sidebar.html',
        'text!templates/about.html',
        'text!templates/services.html',
        'text!templates/portfolio.html',
        'text!templates/resume.html',
        'text!templates/blog.html',
        'text!templates/testimonial.html',
        'text!templates/contact.html',
        'text!templates/footer.html',
    ],
        function (  Vue, preloader, phone, socials, sidebar, about, services,
                    portfolio, resume, blog, testimonial, contact, footer) {

            var app = new Vue({
                el: '#app',
                data: {
                    loaded: false
                },
                mounted: function () {
                    this.loaded = true;
                    // `this` points to the vm instance
                    console.log('App is ready!');
                },
                components: {
                    'my-preloader': {
                        template: preloader
                    },
                    'my-phone': {
                        template: phone,
                        data: function () {
                            return { phone: '+1234567890' }
                        }
                    },

                    ...

                }
            });

            require(['js/scripts.min.js']);
        }
    );