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:



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:

U ovoj verziji je nakon instanciranja je još potrebno da se odradi “mount-ovanje” tj. povezivanje instance sa HTML elementom.

Pa bi ceo kod izgledao ovako:

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.

Ukoliko imamo potrebu da pristupamo svojstvima Vue instance i izvan same instance, onda je potrebno dodeliti nekoj promenjivoj kreiranu instancu:

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:

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

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

Podelite:

4 Responses to “Instalacija Vue.js”

  1. Ivan

    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.

  2. Dragoljub

    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!

  3. Versus

    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 🙂

Ostavite komentar