Dlaczego konwertować ASTRO na VUE?
Astro i Vue to oddzielne modele renderowania - Astro renderuje wstępnie do HTML, podczas gdy komponenty .vue polegają na reaktywności wykonawczej Vue. Astro obsługuje Vue bezpośrednio, więc ludzie zazwyczaj osadzają Vue zamiast konwertować z Astro.
Jak przekonwertować ASTRO na VUE
Użyj Vue wewnątrz Astro FREE
Uruchom npx astro add vue, aby dodać @astrojs/vue, a następnie importuj i renderuj komponenty .vue wewnątrz plików .astro, nawadniając je dyrektywami client:*.
Ręczne przepisanie na Vue SFC FREE
Przenieś znacznik .astro do bloku <template>, a logikę z bloku kodu do <script setup>, konwertując propsy, sloty i wyrażenia na ich odpowiedniki w Vue.
O tych formatach
Plik .astro to szablon komponentu dla frameworka webowego Astro. Zawiera on znacznik w stylu HTML oraz opcjonalną sekcję skryptu JavaScript lub TypeScript, a Astro kompiluje go do czystego…
Otwórz szczegóły .ASTRO →Plik .vue to albo scena krajobrazu 3D E-on Vue (teren, niebo, roślinność, oświetlenie), albo komponent internetowy Vue.js. Otwórz scenę 3D za pomocą programu Vue firmy Bentley Systems,…
Otwórz szczegóły .VUE →Jakość i na co uważać
- Dokumentacja Astro zaznacza, że można używać komponentów Vue wewnątrz Astro, ale nie komponentów Astro wewnątrz bazy kodu Vue.
- Vue używa dyrektyw takich jak
v-if,v-fori powiązań:prop, które nie mają bezpośredniego odpowiednika w Astro, więc każde przepisanie to praca ręczna. - Blok kodu Astro tylko dla serwera i model nawadniania
client:*nie przekładają się bezpośrednio na reaktywność wykonawczą Vue.
Najczęściej zadawane pytania
Czy istnieje konwerter .astro na .vue?
Czy mogę uruchamiać komponenty Vue w projekcie Astro?
@astrojs/vue dodaną za pomocą npx astro add vue.Jak sloty przekładają się na Vue?
<slot> staje się Vue <slot> w <template>, ale nazwane sloty i propsy wymagają ręcznego mapowania.