marketplace demo

市場入門套件

根據 MIT 授權條款，此 Stelace 入門套件可免費使用。請隨意分叉、貢獻或將其變成您自己的❤️。

---

此入門套件提供了一個類似 AirBnB 的高效能市場前端 (Vue.js)，具有基於開源 Stelace API 伺服器的預先配置無伺服器部署。

內容

• 特徵 ？
  • 預設很快？
  • 整合
• 測試
• 堆疊
• 入門
• 部署

現場演示

還提供專注於搜尋、自動化和即時的平台模板。

斯泰萊絲是什麼？

Stelace API 為從搜尋密集型市場到線上社群應用程式的 Web 平台提供進階搜尋、資產和使用者管理、自動化和內容交付 API。 Stelace 開源市場後端讓您專注於使您的平台獨一無二的方面。

API文件

---

特徵 ？

• 資產管理。資產可以是任何東西，從公寓、房子到汽車或音樂會
• 強大且容錯的搜尋？
• 使用者身份驗證，包括社交登入和 SSO
• 用戶管理和評級
• 即時事件和訊息傳遞
• 使用 Stelace 工作流程實現自動化？
• 使用無伺服器功能的可自訂付款流程
• 無頭 CMS ？使用 Stelace 內容 API
• 影像和使用者檔案的全域 CDN
• 國際化？以及完整的翻譯
• 無障礙
• ……
• 以及 Stelace API 的更多功能

預設很快？

開箱即可獲得 90+ PageSpeed 分數：

• 預先渲染靜態頁面以實現最快的頁面加載，並將 Vue.js 融入完整的 SPA。
• 使用quasar.conf.js中最佳化的 Webpack 配置進行程式碼分割。
• 使用 WebP 進行影像壓縮並使用 AWS Lambda 無伺服器調整大小
• 資源預取和預加載
• 感謝 Quasar，PWA 已準備就緒

該套件遵循 PRPL 模式：文件中的更多資訊。

整合

利用這些整合可以更快地開始運行您的平台：

• 使用 Netlify 進行自動化和持續部署
• 使用 Netlify 功能和 Stelace 工作流程進行 Stripe 支付
• Sentry用於生產環境調試
• 透過 OpenStreetMap 提供者進行地圖和地點搜索
• Google分析

測試

• 使用 TestCafé 進行端對端跨瀏覽器測試
• 與 CircleCI 持續集成

堆疊

無伺服器 JAMStack 架構：

• Vue.js
• 類星體框架
• Stelace API 作為後端
• Stelace 無頭 CMS
• Stelace.js SDK
• Netlify 用於靜態網站和 lambda 函數部署

Node.js >= 10.18 用於工具。

入門

您需要 Stelace API 金鑰才能開始。好消息：Stelace 是開源的，因此您可以部署自己的伺服器。

1. 克隆這個儲存庫

git clone https://github.com/stelace/marketplace-demo.git
cd marketplace-demo

2. 安裝node_modules

 # using yarn instead of npm is recommended
yarn

如果您沒有安裝yarn，您可以按照這些說明進行操作。

3. 建立用於開發和生產的環境文件。

您可以複製.env.example並用 Stelace API 金鑰填充它（使用伺服器端開源專案產生它們）。

cp .env.example .env.development
# You may want to use live keys in this file
cp .env.example .env.production

需要填寫以下環境變數：

• STELACE_INSTANT_WEBSITE_URL
• Vue 應用程式中使用的STELACE_PUBLISHABLE_API_KEY ( pubk_ ...)
• STELACE_SECRET_API_KEY ( seck_ ...) 用於資料播種腳本
• STELACE_API_URL可以留空，除非您使用自己的伺服器而不是預設的api.stelace.com

請參閱.env.example以了解有關環境變數的更多詳細信息，包括地圖、支付網關、日誌記錄和分析。

4. 種子發育數據

yarn seed

5. 啟動開發伺服器

quasar dev
# or, if you want to run Netlify functions with stripe payments as well:
yarn dev

有關前端配置和組件的更多詳細信息，請參閱 Quasar 文件。

使用自架的 Stelace API 伺服器（開源後端）進行開發。

在啟動專案的伺服器之前，必須在本機啟動 Stelace Core API 伺服器。

首先我們需要啟動 Stelace Core API 所需的服務。

yarn docker:db

然後我們需要使用即時配置來初始化資料庫。

 cd /path/to/stelace-core
git checkout dev
yarn setup:instant

將顯示秘密和可發佈的 api 金鑰，以便您可以將其用作該專案的環境變數。您還需要設定一些環境變量，例如STELACE_API_URL (http://127.0.0.1:API_PORT)。

讓我們啟動伺服器。

yarn dev

請參考stelace-server專案中的.env.example 。

6. 品牌推廣

在src/styles.json中使用您自己的顏色和品牌自訂應用程序，記錄在 styles.json.md 中。

部署

請參閱部署文件部分以了解更多詳細資訊。