Dynaamisen WordPress-sivuston kehitys Vue.js-sovelluskehyksellä
Petunova, Anita (2023)
2023
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202304266484
https://urn.fi/URN:NBN:fi:amk-202304266484
Tiivistelmä
Insinöörityön aiheena on dynaamisen WordPress-sivuston kehitys Vue-sovelluskehyksen avulla. Insinöörityön ensimmäisenä tavoitteena on antaa lukijalle selkeät ja käytännönläheiset ohjeet Vue-sovelluskehyksen hyödyntämisestä dynaamisen WordPress-sivuston rakentamisessa. Toisena tavoitteena on suunnitella ja toteuttaa käytännön esimerkkinä toimiva dynaaminen WordPress-blogisivusto käyttäen Vue.js:ää ja WordPressin sisäänrakennettuja toimintoja ja rajapintoja.
Vue-sovelluskehystä voi käyttää WordPressin kanssa kolmella eri tavalla: WordPress-teemassa, WordPress-lisäosan kehittämisessä tai headless WordPress -ratkaisuna. Tässä insinöörityössä Vue.js integroidaan osaksi WordPress-teemaa, jolloin sivuston rakentamiseen voi hyödyntää sekä WordPressin sisäänrakennettuja toimintoja että Vue.js:n ominaisuuksia.
Vue.js:n integrointi osaksi WordPress-teemaa voi tapahtua CDN-skriptin avulla tai asentamalla NPM-paketit koontityökalun kanssa. CDN-asennuksessa Vue-komponentit sijoitetaan JavaScript-tiedostoihin, kun taas Vue-komponenttien sijoittamiseen vue-tiedostoihin tarvitaan koontityökalu. Lisäksi koontityökalu mahdollistaa erilaisten Vue-kirjastojen ja Vuex-tilanhallintamallin käyttämisen.
Insinöörityön käytännön esimerkkisivusto on WordPress-blogisivusto, joka sisältää ruoka- ja juomareseptejä. WordPress-blogisivustolla käytetään Vue 3:sta, joka on asennettu Vue CLI -koontityökalun avulla. Blogisivustolle on kehitetty Vue.js:n avulla dynaamisia toimintoja, joita ovat suosikkilistatoiminto, kuvakarusellit, alasvetovalikot ja dynaamisesti toimivat välilehdet. Suosikkilistatoiminnossa reseptejä voi lisätä suosikkilistoille ja tarvittaessa myös poistaa ne sieltä. Suosikkilistatoiminnossa käytetään WordPress REST API -kutsuja ja Vuex-tilanhallintaa, jolloin tieto joutuu kulkemaan tietokannan, WordPress-teeman ja Vue-komponenttien kautta. Suosikkilistatoiminnon dynaamiset näkymät päivittyvät oletettua hitaammin, kun taas pienemmät dynaamiset toiminnot toimivat asianmukaisesti.
Vue-sovelluskehystä voi käyttää WordPressin kanssa kolmella eri tavalla: WordPress-teemassa, WordPress-lisäosan kehittämisessä tai headless WordPress -ratkaisuna. Tässä insinöörityössä Vue.js integroidaan osaksi WordPress-teemaa, jolloin sivuston rakentamiseen voi hyödyntää sekä WordPressin sisäänrakennettuja toimintoja että Vue.js:n ominaisuuksia.
Vue.js:n integrointi osaksi WordPress-teemaa voi tapahtua CDN-skriptin avulla tai asentamalla NPM-paketit koontityökalun kanssa. CDN-asennuksessa Vue-komponentit sijoitetaan JavaScript-tiedostoihin, kun taas Vue-komponenttien sijoittamiseen vue-tiedostoihin tarvitaan koontityökalu. Lisäksi koontityökalu mahdollistaa erilaisten Vue-kirjastojen ja Vuex-tilanhallintamallin käyttämisen.
Insinöörityön käytännön esimerkkisivusto on WordPress-blogisivusto, joka sisältää ruoka- ja juomareseptejä. WordPress-blogisivustolla käytetään Vue 3:sta, joka on asennettu Vue CLI -koontityökalun avulla. Blogisivustolle on kehitetty Vue.js:n avulla dynaamisia toimintoja, joita ovat suosikkilistatoiminto, kuvakarusellit, alasvetovalikot ja dynaamisesti toimivat välilehdet. Suosikkilistatoiminnossa reseptejä voi lisätä suosikkilistoille ja tarvittaessa myös poistaa ne sieltä. Suosikkilistatoiminnossa käytetään WordPress REST API -kutsuja ja Vuex-tilanhallintaa, jolloin tieto joutuu kulkemaan tietokannan, WordPress-teeman ja Vue-komponenttien kautta. Suosikkilistatoiminnon dynaamiset näkymät päivittyvät oletettua hitaammin, kun taas pienemmät dynaamiset toiminnot toimivat asianmukaisesti.