Использование vue компонентов прямо в браузере без сборки (http-vue-loader)

Категория: VueJS

Использование vue-компонентов в браузере без сборки - без node.js и webpack.

No node.js environment! No build step!

Примечание

Этот способ подключения vue-компонентов не из лучших практик! Я применял http-vue-loader для разработки виджета под legacy-проект в котором нет автоматизации (continuous integration) и даже git.

Подключить *.vue компонент напрямую (без сборки) позволяет пакет https://github.com/FranckFreiburger/http-vue-loader.

Внимание!

На странице репозитория есть пример подключения скрипта httpVueLoader.js из CDN unpkg.com.

Не рекомендую использовать этот способ, т.к. даже в режиме разработки unpkg.com часто сбоил.

Получаем зависимости/скрипты:

npm install --save vue http-vue-loader

Пример подключения зависимостей и vue-компонента с помощью jQuery (для разрешения зависимостей):

$(function() {
    $.when(
        $.getScript('//cdn.polyfill.io/v2/polyfill.js'),
        // @todo Check the v3: //polyfill.io/v3/polyfill.min.js?flags=gated&features=default

        $.getScript('/js/vue.js'),       // 80 kb min+gzip
        //$.getScript('/js/vue.min.js'), // 33 kb min+gzip

        $.getScript('/js/vue/httpVueLoader.js') // @see https://github.com/FranckFreiburger/http-vue-loader

        /* @note Example usage custom promise: $.Deferred(function(deferred) { $(deferred.resolve); }) */
    ).done(function() {
        httpVueLoader.register(Vue, '/js/your-component.vue');

        new Vue({
            el: '#your_component_app'
        });
    });
});
Примечание

Полифиллы от polyfill.io нужны для поддержки IE11.

Можно посмотреть аналогичные библиотеки полифиллов:

//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js
//cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js    // @see https://github.com/taylorhakes/promise-polyfill
//cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js     // @see https://github.com/stefanpenner/es6-promise

#http-vue-loader

категория: VueJS