Cordova rakenduse seadistamine saidi Vue.js abil

Viimasel perioodil otsustasin õppida Vue.js-i, kuna tunnen vajadust kasutada esimest lähenemist üheleheliste rakendustega. Parim viis selle raamistiku tundmaõppimiseks on tõelise rakenduse loomine, nagu täiustatud ülesandeloend või muu mõistlik rakendus. Seetõttu otsustasin integreerida oma esimese Vue.js rakenduse Cordovaga, et ehitada iOS-i ja Androidi jaoks hübriidrakendus.

Lugesin vähe artikleid, et mõista, kuidas neid tehnoloogiaid paremini kokku panna, ja leidsin palju lahendusi. Selles artiklis tahan selgitada, kuidas hübriidrakendust samm-sammult seadistada.

Enne alustamist peate teadma, et jätkamiseks on vaja npm installijat (sõlmepaketi haldur) ja Webpack. Kui te ei tea sellest midagi, uurige nende dokumente.

Oled sa valmis? Lähme!

Niisiis, kõigepealt avage terminal ja installige vue käsuridade liides ja kordova globaalselt, kasutades npm.

npm install -g cordova
npm install -g vue-cli

Lihtne, eks? Nüüd peate Webpacki malli põhjal looma uue rakenduse Cordova ja projekti Vue.js, nii et lihtsalt käivitage järgmised käsud:

kordova loo projekti nimi
vue init webpack projekti nimi

Terminal küsib teilt: „Sihtkataloog on olemas. Kas jätkata? ”, Kuna projekti kataloog on juba olemas, kuna see loodi eelmises Cordova etapis. “Jah” on õige vastus. Pärast algprotseduuri peate enne jätkamist kõik failid kustutama www-kausta.

Tore! Installisite kõik vajaliku. Plaksutab sulle.

Nüüd peame enne rakenduse ehitamist oma projekti erinevates kohtades tegema mõned muudatused.

Alustage siis juurtest. Avage fail index.html ja tehke järgmine muudatus.


  
    
    
    
    
    
     Projekti nimi 
     
  
  
    
    ...

Nüüd peate oma ehitatud projekti kausta www cordova teisaldamiseks sihtkoha marsruuti muutma. Nii avage fail config / index.js ja muutke seda järgmiselt:

ehitama: {
  register: path.resolve (__ dirname, '../www/index.html'),
  assetRoot: path.resolve (__ dirname, '../www'),
  assetSubDirectory: staatiline,
  varadPublicPath: ''
}

Viimane, kuid mitte vähem tähtis, muutke nime, autori ja kirjelduse väärtusi konfiguratsioonis.xml

Enne kui selgitate teile, kuidas oma rakendust ehitada ja seda oma seadmetes testida, tahan teile kinkida. Veetsin palju aega, et aru saada, kuidas lahendada kaks võitlusasja ja minu kingitus on lahendus.

Võitlusasjad on kohandatud fondide ja js minimiseerimise teema.

Kui soovite oma rakenduses kasutada kohandatud fonti, peate muutma suvandi faili build / webpack.base.conf.js. Kui see on teie juhtum, siis lihtsalt avage fail, leidke fontide kohta veebipaketi mooduli test ja lisage suvand publicPath:

publicPath: protsess.env.NODE_ENV === „tootmine”? '../../': '/'

Fondi laadimise küsimuse lahendamise lõpptulemus on järgmine:

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
laadur: URL-laadur,
valikud: {
  limiit: 10000,
  nimi: utils.assetsPath ('font / [nimi]. [räsi: 7]. [ext]'),
  publicPath: protsess.env.NODE_ENV === „tootmine”? '../../': '/'
}

Teine võitlus asi on js minimise teema. See on tõrge tootmisrežiimis:

SyntaxError: Lastelist muutujat ei saa kaks korda kuulutada: 'e'

Webpack kasutab js-koodi minimeerimiseks pistikprogrammi UglifyJs, kuid seal on väike probleem ... SAFARI v10! Selle GitHubi numbri paremaks mõistmiseks lugege seda.

Selle probleemi lahendamiseks peate UglifyJsPlugini suvandeid muutma:

uus UglifyJsPlugin ({
 uglifyOptions: {
  safari10: tõsi,
  tihendada: {
   hoiatused: valed
  }
 },
 ...
})

Lisage vajalikud platvormid

Pärast neid parandusi peate lisama juhtplatvormi kasutades juhtplatvorme.

kordova platvorm lisada android@6.x.x - salvestage
kordova platvorm lisa ios - salvesta
Märkus Androidile: Cordova pluginate ühilduvuse suurendamiseks soovitan kasutada versiooni 6.x.x.

Kui kasutate Giti versioonimist, soovitan teil pärast seda toimingut pistikprogramme, platvorme ja www-kaustu ignoreerida.

Ehitage ja katsetage!

Kas olete katsetamiseks valmis? Peate looma oma hübriidrakenduse ja looma rakenduse iga teie määratletud platvormi jaoks.

npm käivitage
kordova ehitada android
kordova ehitada ios

Ja nüüd… JÄTKAKE!

kordova run ios - seade
kordova run android - seade

Täname, et lugesite ja saate oma rakendust nautida;)