Использование vue компонентов прямо в браузере без сборки (http-vue-loader)
Использование 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