Компоненты одного файла Vue.js БЕЗ процесса сборки

Я люблю vue.js из-за его простоты, а это значит, что я могу взломать быстрый одностраничный SPA с современным, интуитивным синтаксисом привязки данных и без сложной инструментальной цепочки.

Мне также нравится идея *.vue компонентов, что означает, что есть одно место (*.vue файл), где каждый компонент хранит DOM, стилирование и скриптовые функции.

Тем не менее, я хочу использовать однофайловые компоненты, не тратя время на управление процессом сборки каждый раз, когда я добавляю приложение вместе. Короче говоря, я хочу использовать преимущества управления компонентами без накладных расходов на сборку инструментальных средств, что означает, что браузер делает тяжелую работу для загрузки каждого файла *.vue помощью XMLHttpRequest и рендеринга DOM. Убедившись, что мы заменяем module.exports и import вызовы с соответствующей функциональностью Vue.component().

Мне бы очень хотелось узнать, встретил ли кто-нибудь клиентское (только) решение для использования файлов *.vue в браузере. Неужели это уже сделано?

Ответ 1

Я абсолютно уверен, что этого еще не существует, потому что, хотя это может показаться относительно легким, некоторые функциональные возможности сделают его довольно сложным для реализации. Например:

Вы не обязательно импортируете только другие компоненты.vue, вы можете импортировать случайные внешние зависимости. Это означает, что браузеру теперь нужно загружать и анализировать модули npm, обрабатывать их зависимости и т.д.
Различные разделы вашего компонента.vue (шаблон, логика и стиль) могут быть написаны на языках, отличных от HTML, JS и CSS. Это означает, что браузер теперь также нуждается в загрузке компилятора/транспилятора для Jade, CoffeeScript, LESS или любого другого, что вы используете, и запускайте свой код через него. Разумеется, нет никакой гарантии, что такой транспилер, написанный на JavaScript, действительно существует, потому что модуль узла, используемый в процессе регулярной сборки, может быть просто оболочкой для какой-либо внешней библиотеки, которая не может быть запущена в браузере.
Стилирование в компоненте.vue может быть ограничено, что означает, что теперь вам нужно проанализировать шаблон компонента для вставки случайно сгенерированных идентификаторов в качестве атрибутов элементов. И проанализировать стиль одного и того же компонента, чтобы вставить те же идентификаторы в ваши селектор CSS, чтобы ваш стиль заканчивается областью.

И это самые очевидные из моих ног. Конечно, вы можете сильно ограничить себя и не использовать какие-либо из этих функций, но тогда это не действительно компонент.vue, не так ли?

Если вы действительно хотите избежать процесса сборки любой ценой и готовы принять ограничения на использование каких-либо функций выше, почему бы просто не использовать один JS файл:

$(body).append('<style>
  // styling goes here
</style>'); 

var myTemplate = '
  // template goes here
'; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

Вы должны загрузить их в правильном порядке, но там у вас это есть, один компонент для одного человека.