Pojedyncze komponenty pliku Vue.js BEZ procesu kompilacji

Question

Uwielbiam vue.js ze względu na jego prostotę, co oznacza, że ​​mogę zhakować szybki jednostronicowy SPA z nowoczesną, intuicyjną składnią wiążącą dane i bez skomplikowanego toolchain.

mi się też pomysł single-file components co oznacza, że ​​jest jedno miejsce (*.vue pliku), gdzie każdy składnik sklepy DOM, stylistyka i funkcjonalność skryptów.

Jednak chcę używać pojedynczych składników plików bez marnowania czasu na zarządzanie procesem kompilacji za każdym razem, gdy umieszczam aplikację razem. Krótko mówiąc, chcę korzyści płynące z zarządzania komponentami bez nakładów na narzędzia do tworzenia kompilacji, co oznacza, że ​​przeglądarka musi wykonać ciężki lifting w celu załadowania każdego pliku *.vue poprzez renderowanie XMLHttpRequest i DOM. Upewniając się, że zastępujemy połączenia module.exports i import z odpowiednią funkcją Vue.component().

Chciałbym wiedzieć, czy ktoś natknął się na rozwiązanie (przeznaczone wyłącznie dla klientów) do korzystania z plików *.vue w przeglądarce. Z pewnością już to zrobiono?

Answer 1

Jestem absolutnie pewien, że to jeszcze nie istnieje, ponieważ chociaż może wydawać się to stosunkowo łatwe, niektóre funkcje sprawiają, że jest to dość trudne do zrealizowania. Na przykład:

1. Nie musisz importować tylko innych komponentów .vue, możesz importować losowe zależności zewnętrzne. Co oznacza, że ​​przeglądarka musi teraz pobierać i parsować moduły npm, obsługiwać ich zależności itp.
2. Różne sekcje komponentu .vue (szablon, logika i styl) mogą być napisane w językach innych niż HTML, JS i CSS. Co oznacza, że ​​przeglądarka musi teraz również pobrać kompilator/transpiler dla Jade, CoffeeScript, LESS lub cokolwiek innego, czego używasz i uruchamiać przez niego swój kod. Nie ma gwarancji, że taki transpilator napisany w JavaScript faktycznie istnieje, ponieważ moduł węzła używany w zwykłym procesie kompilacji może być po prostu otoką dla jakiejś biblioteki zewnętrznej, której nie można uruchomić w przeglądarce.
3. Stylizacja w składniku .vue może być scoped, co oznacza, że ​​trzeba teraz przeanalizować szablon komponentu, aby wstawić losowo wygenerowane identyfikatory jako atrybuty elementu ORAZ parsować styl tego samego komponentu, aby wstawić te same identyfikatory do swojego CSS selektory, dzięki czemu stylizacja kończy się na zasięgu.

A te są najbardziej oczywiste z mojej głowy. Oczywiście, możesz poważnie ograniczyć się i nie używać żadnej z tych funkcji, ale to nie jest już składnik .vue, prawda?

Jeśli naprawdę chcesz, aby uniknąć procesu kompilacji za wszelką cenę i są gotowi zaakceptować ograniczenia nie używając dowolnej z funkcji powyżej, dlaczego nie wystarczy użyć pojedynczego pliku JS:

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

var myTemplate = ` 
    // template goes here 
`; 

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

Masz ładować je we właściwej kolejności, ale tam masz go, pojedynczy komponent biednego człowieka.