Šta je Vue.js?

Vue.js se izgovara /vjuː/, slično kao engleska reč view, a u oficijelnoj dokumentaciji kažu za njega da je progresivni JavaScript framework za izradu korisničkog interfejsa.

“Progressive framework for building user interfaces”.
Dokumentacija Vue.js

vue.js

Vue.js se smatra da je jedan od najjednostavnijih JavaScript framework-a, koji je veoma brz, ima malu veličinu i veoma detaljnu dokumentaciju. Vue.js je veoma fleksibilan i prilagodljiv različitim vrstama projekata. U osnovnoj verziji je praktično library, i kao takav je primenjiv za male i srednje projekte, medjutim Vue.js dodavanjem odgovarajućih oficijalnih komponenati postaje full framework, i kao takav ima potencijal za izradu enterprise aplikacija.
Iako trenutno Vue.js nije još uvek popularan kao React (koji podržava Facebook) ili Angular 2 (koji podržava Google), njegova popularnost raste iz dana u dan, a Laravel community ga smatra za jedan od njihovih omiljenih front-end framework-a.

Integracija 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.

a) Integracija sa CDN

Dovoljno je da se na dnu body sekcije ubaci skipta koja se nalazi na CDN-u:

i Vue.js je spreman za rad

b) Instalacija Vue.js kao npm paketa

Za instalaciju Vue.js kao npm paketa je potrebno da imamo instaliran node.js i njegoov package manager npm (pogledajte u članku “Instalacija alata za web development”). Nakon toga možemo da instaliramo vue.js naredbom:

npm install vue

Generisanje projekta sa vue-cli

Vue.js obezbedjue oficijelni vue-cli koji se koristi za brzu izradu starter projekta. Postoji više različitih tipova starter projekta koji bi trebali da zadovolje većinu projekata. Pre svega je potrebno da imamo instaliran vue-cli, koji se kasnije koristi za stvaranje starter projekta:

vue-cli 2.0

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:

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

vue-cli 3.0

U trenutku pisanja članka postoji i novi vue-cli u alfa verziji. Za instaliranje vue-cli 3.0 alata je potrebno 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

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

Generisanje projekta sa Nuxt.js

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

Pogledajte slične članke...

Podelite:

Ostavite komentar