Integrisanje u postojeći projekat
Izmedju ostalog Vue.js je popularan medju developer-ima, jer ima mogućnost da se jednostavno integriše u postojeći projekat, dovoljno je da se na dnu body sekcije ubaci skipta koja se nalazi na CDN-u:
|
1 |
<script src="https://unpkg.com/vue@next"></script> |
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue"></script> |
Kada imamo dostupanu Vue.js biblioteku u okviru projekta posle ovog script taga je dovoljno da otvorimo novi script tag u okviru koga će se kreirati instanca.
U slučaju verzije 3.0 je malo promenjena sintaksa (pogledajte zbog čega su nastale ove promene na oficijelnom sajtu), pa instanciranje Vue objekta izgleda ovako:
|
1 |
let app = Vue.createApp({ // Options objekat }); |
U ovoj verziji je nakon instanciranja je još potrebno da se odradi “mount-ovanje” tj. povezivanje instance sa HTML elementom.
|
1 |
let vm = app.mount("#app") |
Pa bi ceo kod izgledao ovako:
|
1 2 3 |
let app = Vue.createApp({ // Options objekat }); let vm = app.mount("#app") |
Primer (3.0 ver):
See the Pen
Untitled by Web programiranje (@chos)
on CodePen.
Svaka Vue aplikacija mora da ima kreiranu instancu na osnovu konstruktorske funkcije Vue(). Konstruktorskoj funkciji se prosledjuju podaci neophodni za kreiranje nove instance kroz tzv. “options objekat”. Za kreiranje nove instance je dovoljno pozvati konstruktorsku funkciju sa ključnom reči new.
|
1 |
new Vue( { //ovo je tzv. options objekat } ) |
Ukoliko imamo potrebu da pristupamo svojstvima Vue instance i izvan same instance, onda je potrebno dodeliti nekoj promenjivoj kreiranu instancu:
|
1 2 3 |
var vm = new Vue({ // "options objekat" }) |
Dozvoljeno je intancirati više Vue instanci ali sva od instanci mora da “kontroliše” različite delove HTML-a, jer nije dozvoljeno vezivati jednu instancu za više različitih HTML delova. Medjutim često se javlja potreba da se u web aplikaciju ugradi više istih ili sličnih HTML elemenata koji se ponavljaju (kao što je npr. produkt), a ipak da su povezani sa Vue.js instancama. Pošto nije dozvoljeno vezivati jednu instancu za više različitih HTML delova, onda u tom slučaju treba kreirati Vue.js komponentu i ugraditi je više puta.
Generisanje projekta sa vue-cli
Vue.js obezbedjue oficijelni vue-cli koji se koristi za brzu izradu starter projekta i to je preporučen način pri radu sa Vue.js-om. Prvo je potrebno da imamo instaliran vue-cli, koji se kasnije koristi za stvaranje starter projekta.
Za instaliranje Vue.js 3.0 projekta potreban je klijent čija verzija bar počinje sa 4.x i potrbno je da imamo instaliranu minimum 8.0 verziju node.js (kako da instalirate iili ažurirate node.js pogledajte u članku “Instalacija alata za web development”). Kada imamo instaliran node.js onda vue-cli 3.0 instaliramo globalno koristeći naredbu:
npm install -g @vue/cli
NAPOMENA:
Ukoliko već imamo instalirn Vue klijent ali stariju verziju moramo da je ažuriramo. Proveru verzije vršimo sa:
vue -V
A ukoliko je potrebno ažuriranje vršimo sa:
npm update -g @vue/cli
Nakon instaliranog vue-cli možemo da generišemo novi starter projekat sa naredbom:
vue create [options] naziv-projekta
Opcije dostupne pri kreiranju projekta su:
- –default ili skraćeno -d (preskače sva pitanja pri instalaciji i instalira podrazumevani set)
- –preset <presetName> ili skraćeno -p (preskače sva pitanja pri instalaciji i instalira pripremljeni set tzv “preset”)
- –inlinePreset <json> ili skraćeno -i preskače sva pitanja pri instalaciji i koristi inline JSON kao preset)
- –force ili skraćeno -f (ako postoji folder sa istim nazivom onda ga pregazi)
Sa podrazumevanim setom se dobija instaliran lokalni server, kao i instalacija “babel”, “eslint” i “autoprefikser” plugina. Uz ovaj podrazumevani set takodje dolazi pragmatičan način za izbor podržanih browser-a pod nazivom “browserlist”, sa kojm uzimamo u obzir da noviji browseri već podržavaju nove ES standarde kao i da kod njih nije potrebno dodavanje prefix-a u okviru CSS-a. Ovaj inteligentni način selekcije nam omogućava da dobijamo manju veličinu koda.
Uz ovakvo generisan projekat se ne dobija instaliran “vue-ruter”, kao ni vue state menadzment “vuex”, pa ukoliko nam je to potrebno moramo da ih naknadno instaliramo kao npm pakete:
npm install vue-router
npm install vuex –save
Po kreranju projekta koristeći terminal udjemo u folder projekta i pokrenemo lokalni server sa naredbom:
npm run serve
Pristup serveru sa lokalne mašine imamo preko url-a: http://localhost:8080/, dok pristup u okviru iste mreže ali sa nekog drugo aparata možemo dobiti na url adresi: http://192.168.0.104:8080/
Za startovanje JS lint-a koristimo:
npm run lint
Dok za izradu produkciske verzije projekta koristimo naredbu:
npm run build
npm install –global vue-cli
Nakon instalacije vue-cli možemo da izaberemo neki od predefinisanih tipova projekta, više o mogućim instalacijma pogledajte na oficijelnoj github stranici Vue templates.
U ovome članku je objasniti tzv. “full webpack” starter projekat, u sklopu koga su integisani svi moderni alati koji čine jedan framework. Najvažniji je Webpack, koji nam omogućava korišćenje Babela, SCSS loader-a i dr. Projekat se generiše sa:
vue init webpack naziv-projekta
Nakon generisanja projekta, potrebno je da instaliramo sve dependencies koje su definisane u package.json. Za izvršenje naredbe je potrebno da u terminalu “udjemo” u projekat i startujemo naredbu:
cd naziv-projekta
npm install
Takodje ovaj projekat dolazi sa lokalnim dev serverom, pa nakon instaliranja zavisnosti možemo da startujemo development server sa naredbom:
|
1 |
npm run dev |
Sever će učitavati stranicu na: localhost:8080 pri svakoj promeni projekta. Pored servera u development okruženju dobijamo i:
- vue-loader za učitavanje single file Vue komponente
- Lintovanje koda
- Source maps
NAPOMENA:
Ako se pogleda fajl “index.html”, primetiće se da je u njega ugradjen script sa lokacijom foldera pod nazivom “dist”. Medjutim njega nema u development modu, generiše se tek nakon naredbe za build projekta koji je spreman za produkciju. U development modu se svi javascript fajlovi drže u memoriji.
Po završetku projekta možemo da generišemo sve fajlove za produkciju sa naredbom:
npm run build
Nakon buildovanja projekta dobijamo:
- JavaScript minified sa UglifyJS
- HTML minified sa html-minifier
- Svi CSS fajlovi ekstaktovani u minifikovni u jedan fajl sa cssnano
Sa ovim starter projektom dolazi integrisana podrška za testiranje. I to unit testovi se stertuju u JSDOM sa Jest-om, naredbom:
npm run unit
Dok se End-to-end testovi izvršavaju sa Nightwatch naredbom:
npm run e2e
Generisanje projekta sa Nuxt.js
Nuxt.js je framework napravljen nad Vue.js, a koji vam pomaže da jednostavno napravite Vue.js aplikacije koje se renederuju na serveru tzv. “Server-Side Render App”. Nuxt.js apstrahuje većinu kompleksne konfiguracije uključene u upravljanje stvarima kao što su rad sa asinhronim prikupljanjem podataka, middleware, i rutiranje. Sličan je “Angular Universal” koji je napravljen nad Angular.js, ili “Next.js” koji se koristi za React.js.
Nuxt.js je napredna tema i biće detaljno objašnjena u narednim člancima, ali se ovde pominje kao još jedan način za kreiranje starter projekta koji pokreće Vue.js. Kreiranje starter projekta sa Nuxt.js se takodje izvršava iz vue-cli sledećom naredbom:
vue init nuxt-community/starter-template naziv_projekta
Nakon ovoga je potebno ući u kreiran projekat i instalirati sve dependencies definisane u package.json
cd naziv_projekta
npm install
Sada smo spremni da pokrenemo server i krenemo sa radom koristeći naredbu:
npm run dev
Aplikacija je dostupna na http://localhost:3000
Zadovoljstvo mi je što sam “pronašao” Vaš sajt. Solidno poznajem JS a ovde pokušavam da se upoznam sa Vue.js. Mislim da bi u tektovima na ovu temu bilo zanimljivo i veoma korisno da možemo da vidimo uporedni prikaz rešavanja istog zadatka isključivo u vanila JS i upotrebom Vue.js.
Ivane slažem se sa Vama, medjutim to bi iziskivalo da uložim još slobodnog vremena kojeg ionako imam malo 🙂
Imajte u vidu da je sajt neptrofitnog karaktera i moj pokušaj da vratim zajednici ono što sam od nje uzeo. Voleo bih kada bi neko iz zajednice takodje preuzeo deo “dobrotvornog” rada na sebe i da detaljnije pojasni ovo što ste pomenuli.
Veliki pozdrav za sve programere!
Koliko predznanja javascript je potrebno da bi se shvatio Vue posto mi je trenutno minimalno? Da li mogu preskociti “stari” javascript i odmah krenuti sa modernim Javascript (novi standardi) pa odmah Vue? Pohvale za trud. Fenomenalno 🙂
Preporuka je da se ne preskaču osnove JavaScript-a, Vue.js je takodje JavaScript!
Srećno!