Clever Geek Handbook

EinfĂĽhrung in Vue Storefront

Guten Tag, mein Name ist Andrey Soldatov. Im Team der Rosselkhozbank entwickeln wir neue interessante Projekte im Zusammenhang mit der Landwirtschaft. Als Front-End-Lösung für einige von ihnen haben wir uns für eine interessante Open-Source-Lösung Vue Storefront entschieden. In diesem Artikel können Sie sich mit den wichtigsten Funktionen und Merkmalen dieser Lösung vertraut machen. Der Artikel ist eine Übersetzung eines Artikels aus dem offiziellen Vue Storefront-Blog. Das Original finden Sie hier .

Vue Storefront ist eine ziemlich komplexe Lösung mit umfangreichen Funktionen. Das Erlernen aller kann einige Zeit dauern. In diesem Artikel werde ich versuchen, Ihnen in wenigen Minuten die wichtigsten Konzepte zu erläutern, um Ihnen alles zu zeigen, was Sie für den Einstieg in Vue Storefront benötigen.

Was ist Vue Storefront?

Vue Storefront — backend- PWA () , Vue.js. , headless-, Vue Storefront eCommerce , PWA Magento, Shopify, BigCommerce, WooCommerce .

open source .

Vue Storefront:

  • mobile-first

  • MIT

  • « » ( SEO)

  • Offline

Vue Storefront, GitHub .

?

Vue Storefront backend- vue-storefront-api API- eCommerce backend-. vue-storefront-api . , , eCommerce , - - .

, ( , , Magento 1 -> 2), frontend.

API :

  • data pump ( mage2nosql) (, ..) eCommerce Vue Storefront ElasticSearch , vue-storefront-api. Vue Storefront. ElasticSearch backend- .

  • worker pool — ( , ..), vue-storefront-api backend .

, Vue Storefront backend .

backend (Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce), .

, .

?

Vue Storefront :

  • Vue Storefront Core (/core(https://github.com/DivanteLtd/vue-storefront/tree/master/core)) , Vue Storefront . : SSR, , . , , .

  • Vue Storefront Modules (/core/modules /src/modules) - eCommerce . (, , wish list, , ). / / , . .

  • Vue Storefront Themes (src/themes) - . / HTML- . Vue Storefront .

: — Vue Storefront Themes, , Vue Storefront Modules. Vue Storefront Core .

Vue Storefront .

: Vue Storefront.

Vue Storefront

:

Das ist alles, was Sie brauchen, damit VS mit unserem Demo-Backend funktioniert.
, VS -.

  • frontend backend- ( , Vue Storefront).

  • frontend vue-storefront-api , -.

  • frontend vue-storefront-api, eCommerce backend.

- , "yarn installer" . "yarn dev" ( 3000 ). , , .

Vue Storefront

Vue Storefront (, , API, ..) , "/config". default.json .

local.json default.json, . local.json . Vue Storefront, .

Vue Storefront

Vue Storefront , — HTML CSS . - .

Geschäftslogik aus Kernkomponenten kann mithilfe der Vue.js-Mixins problemlos in jedes Thema eingebettet werden
- Vue.js

- . Vue.js -. , , , , Microcart - ( ), (), mixins: [Microcart]. , , - . , .

- , package.json, config/local.json “yarn”, Lerna ( monorepos).

Vue Storefront , . .

  • ( prod) sw-precache ( “/core/build/webpack.prod.sw.config.js”). Service Worker Application.

Hier finden Sie statische Ressourcen. Bitte beachten Sie, dass Servicemitarbeiter nur im Produktmodus arbeiten.
. , Service Worker prod .

  • IndexedDB Local Storage. , , , . “/core/lin./storage”.

, , . Vue Storefront .

?

, , , Vue Storefront! , .

4 Vue Storefront .



More articles:


All Articles