Introdução à Vue Storefront

Boa tarde, meu nome é Andrey Soldatov, na equipe do Rosselkhozbank estamos desenvolvendo novos projetos interessantes relacionados à agricultura. Como solução de front-end para alguns deles, decidimos usar uma solução de código aberto interessante, o Vue Storefront. Neste artigo, você pode se familiarizar com os principais recursos e recursos desta solução. O artigo é uma tradução de um artigo do blog oficial da Vue Storefront, o original está disponível aqui .

O Vue Storefront é uma solução bastante complexa com amplos recursos. Aprender todos eles pode levar algum tempo. Neste artigo, tentarei explicar os conceitos-chave em alguns minutos para mostrar tudo que você precisa para começar a usar a Vue Storefront.

O que é a 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

:

• 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 . - .

- . 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.

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

, , . Vue Storefront .

?

, , , Vue Storefront! , .

• Community

• C

• Vue Storefront

4 Vue Storefront .