- Like
- Digg
- Del
- Tumblr
- VKontakte
- Flattr
- Buffer
- Love This
- Odnoklassniki
- Meneame
- Blogger
- Amazon
- Yahoo Mail
- Gmail
- AOL
- Newsvine
- HackerNews
- Evernote
- MySpace
- Mail.ru
- Viadeo
- Line
- Comments
- Yummly
- SMS
- Viber
- Telegram
- Subscribe
- Skype
- Facebook Messenger
- Kakao
- LiveJournal
- Yammer
- Edgar
- Fintel
- Mix
- Instapaper
- Copy Link
W poprzednim odcinku nauczyliśmy się tworzyć komponenty w Vue.js. Kiedy nasza aplikacja rozrasta się i jest ich więcej i więcej warto to sobie jakoś uporządkować i ułatwić pracę. I tu z pomocą przychodzi vue-loader.
Ten odcinek może być w pierwszej chwili trochę trudny do zrozumienia dla osób, które jeszcze nigdy w życiu nie miały styczności z Webpackiem. Spokojnie. Nadrobimy to wkrótce. Jeżeli nie znasz webpacka to na razie po prostu załóż w uproszczeniu, że to narzędzie budujące pliki wynikowe. Na potrzeby tego odcinka jest to wystarczające.
Vue-loader pozwala nam na tworzenie plików *.vue
, z które następnie Webpack przetwarza i otrzymujemy pliki końcowe. Struktura takiego pliku *.vue
jest bardzo prosta, zobacz na ten przykład z dokumentacji:
W <template>
zawiera się nasz HTML. Do <script>
leci kod naszego JS, a do <style>
CSS. Banalne. Warto zaznaczyć, że zamiast HTMLa możemy skorzystać z preprocesora np. Z Puga (wcześniej znanego jako „jade”). Jeżeli nie znasz Puga to ten przykład szybko wyjaśnia jego działanie:
1 2 3 4 5 |
<template lang="pug"> div.entry h1 Mój wpis na bloga p Dzisiaj opisze wam xyz </template> |
Co oczywiście wynikowo zamieni się w:
1 2 3 4 |
<div class="entry"> <h1>Mój wpis na bloga</h1> <p>Dzisiaj opisze wam xyz</p> </div> |
Z kolei w sekcji css możemy skorzystać z SASS definiując <style lang="sass">
.
Samo ładowanie naszych komponentów jest równie proste:
1 2 3 4 5 6 7 8 9 10 11 |
<script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB } } </script> |
W jednym z kolejnych odcinków pokaże po kolei proces powstawania mojej aplikacji konkursowej, gdzie cała struktura opiera się właśnie o vue-loadera. Zrozumienie tego wprowadzenia i poprzednich odcinków pozwoli wam na spokojne przejście ze mną przez cały ten proces i szybsze przyswojenie co tam się dzieje. No i wreszcie będzie jakieś „mięcho”, a nie tylko sucha teoria!
Subskrybuj kanał na YouTube
Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!