Clever Geek Handbook

Vueストアフロントの紹介

こんにちは、アンドレイ・ソルダトフと申します。ロッセルホズバンクのチームで、農業に関連する新しい興味深いプロジェクトを開発しています。それらのいくつかのフロントエンドソリューションとして、興味深いオープンソースソリューションであるVueStorefrontを使用することにしました。この記事では、このソリューションの主な機能と特徴を理解することができます。この記事は、VueStorefrontの公式ブログの記事を翻訳したものです。オリジナルはこちらから入手できます。

Vue Storefront は、広範な機能を備えたかなり複雑なソリューションです。それらすべてを学ぶには時間がかかることがあります。この記事では、Vue Storefrontを使い始めるために必要なすべてを紹介するために、数分で重要な概念を説明しようと思います。

Vueストアフロントとは何ですか？

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

:

VSをデモバックエンドで動作させるために必要なのはこれだけです。
, 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 . - .

コアコンポーネントのビジネスロジックは、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.

ここで静的リソースを見つけることができます。 ServiceWorkerはprodモードでのみ動作することに注意してください。
. , Service Worker prod .

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

, , . Vue Storefront .

?

, , , Vue Storefront! , .

4 Vue Storefront .



More articles:


All Articles