Clever Geek Handbook

Introduction to Vue Storefront

Good afternoon, my name is Andrey Soldatov, in the Rosselkhozbank team we are developing new interesting projects related to agriculture. As a front-end solution for some of them, we decided to use an interesting open source solution Vue Storefront. In this article, you can familiarize yourself with the key capabilities and features of this solution. The article is a translation of an article from the official Vue Storefront blog, the original is available here .

Vue Storefront is a fairly complex solution with extensive capabilities. Learning all of them can take some time. In this article, I'll try to explain the key concepts to you in a few minutes to show you everything you need to get started with Vue Storefront.

What is 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

:

That's all you need to make VS work with our demo backend.
, 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 . - .

Business logic from core components can be easily embedded into any theme using Vue.js mixins
- 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.

You can find static resources here. Please note that Service Workers work only in prod mode.
. , Service Worker prod .

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

, , . Vue Storefront .

?

, , , Vue Storefront! , .

4 Vue Storefront .



More articles:


All Articles