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

Question

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

Я тоже люблю идею single-file components, что означает, есть одно место (*.vue файла), где каждый компонент хранит DOM, стиль и функциональность сценария.

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

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

Answer 1

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

1. Вы не обязательно импортируете только другие компоненты .vue, вы можете импортировать случайные внешние зависимости. Это означает, что браузеру теперь нужно загружать и анализировать модули npm, обрабатывать их зависимости и т. Д.
2. Различные разделы вашего компонента .vue (шаблон, логика и стиль) могут быть написаны на языках, отличных от HTML, JS и CSS. Это означает, что браузер теперь также нуждается в загрузке компилятора/транспилятора для Jade, CoffeeScript, LESS или любого другого, что вы используете, и запускайте свой код через него. Разумеется, нет никакой гарантии, что такой транспилятор, написанный на JavaScript, фактически существует, потому что модуль узла, используемый в процессе регулярной сборки, может быть просто оболочкой для некоторой внешней библиотеки, которая не может быть запущена в браузере.
3. Стиль в компоненте .vue может быть scoped, что означает, что теперь вам нужно проанализировать шаблон компонента для вставки случайно сгенерированных идентификаторов в качестве атрибутов элементов И проанализировать стиль одного и того же компонента, чтобы вставить те же идентификаторы в свой 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 
}) 

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