Clever Geek Handbook

Introducción a Vue Storefront

Buenas tardes, mi nombre es Andrey Soldatov, en el equipo de Rosselkhozbank estamos desarrollando nuevos proyectos interesantes relacionados con la agricultura. Como solución de front-end para algunos de ellos, decidimos utilizar una interesante solución de código abierto, Vue Storefront. En este artículo, puede familiarizarse con las capacidades y características clave de esta solución. El artículo es una traducción de un artículo del blog oficial de Vue Storefront, el original está disponible aquí .

Vue Storefront es una solución bastante compleja con amplias capacidades. Aprenderlos todos puede llevar algún tiempo. En este artículo, intentaré explicarte los conceptos clave en unos minutos para mostrarte todo lo que necesitas para comenzar con Vue Storefront.

¿Qué es 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

:

Eso es todo lo que se necesita para que VS funcione con nuestro backend de demostración.
, 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 . - .

La lógica empresarial de los componentes centrales se puede integrar fácilmente en cualquier tema utilizando mixins de Vue.js
- 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.

Puede encontrar recursos estáticos aquí. Tenga en cuenta que los trabajadores del servicio solo trabajan en modo de producción.
. , Service Worker prod .

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

, , . Vue Storefront .

?

, , , Vue Storefront! , .

4 Vue Storefront .



More articles:


All Articles