使用StackBlitz和SAP Spartacus快速创建电商店铺页面

时间:2022-07-24
本文章向大家介绍使用StackBlitz和SAP Spartacus快速创建电商店铺页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

StackBlitz是一个WebIDE,可以在浏览器里使用SAP Spartacus创建电商网站。

简要步骤如下:

在package.json里手动添加Spartacus依赖,下图是添加前StackBlitz创建Angular应用后默认生成的Angular依赖:

下图是完整依赖,源代码附在后面供大家参考:

{
  "name": "mystore",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.12",
    "@angular/common": "~9.1.12",
    "@angular/compiler": "~9.1.12",
    "@angular/core": "~9.1.12",
    "@angular/forms": "~9.1.12",
    "@angular/localize": "~9.1.12",
    "@angular/platform-browser": "~9.1.12",
    "@angular/platform-browser-dynamic": "~9.1.12",
    "@angular/router": "~9.1.12",
    "@angular/service-worker": "~9.1.12",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "@ng-select/ng-select": "^4.0.0",
    "@ngrx/effects": "~9.1.0",
    "@ngrx/router-store": "~9.1.0",
    "@ngrx/store": "~9.1.0",
    "@spartacus/assets": "^2.1.0",
    "@spartacus/core": "^2.1.0",
    "@spartacus/storefront": "^2.1.0",
    "@spartacus/styles": "^2.1.0",
    "bootstrap": "4.2.1",
    "i18next": "^19.3.4",
    "i18next-xhr-backend": "^3.2.2",
    "ngx-infinite-scroll": "^8.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.12",
    "@angular/cli": "~9.1.12",
    "@angular/compiler-cli": "~9.1.12",
    "@spartacus/schematics": "^2.1.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

依赖安装完毕后,就可以在StackBlitz的预览窗口,查看生成的Spartacus前台页面了: