SeeDAO OS
  • 👋欢迎 Welcome
  • ⭐项目简介 Overview
    • 💡什么是 SeeDAO OS ?
    • 🕴️托管与客制化服务
  • 📘使用者指南 User Guide
    • ⚡快速开始
      • 安装部署
      • 环境设置
      • 疑难排解
    • ☁️SeeDAO OS API
      • Error Codes
      • Event
      • User
    • 🪄客户端 SDK (node.js)
      • User
  • 📙知识库 Knowledge Base
    • 🏗️技术架构
      • 设计哲学
      • 技术栈
      • 前端 - Vue3
        • 国际化
        • 状态管理 Vuex
        • 数据埋点 Google Analytic
      • 后端 - Express (Nodejs)
        • MRCS 架构
        • 设置管理
        • FlureeDB 交互
        • 日志管理 - pino
        • 封装 NPM 包
      • 数据库 - FlureeDB (GraphQL)
      • 链上相关操作
        • DAO 标准 - DAO*
    • 🛠️功能模块
      • 成员 User
        • 社交账户 Auth
      • 积分 Point
      • 任务 Task
        • 评价 Review
      • 提案 Proposal
        • 投票 Poll & Vote
      • 预算 Budget
        • 链上记录 Transaction
        • 资产 Asset
        • 代币 Token
      • 悬赏 Bounty
      • 公会 Guild
      • 项目 Project
      • 通知 Notification
        • 短信 ShortMessage
      • 线索 Lead
        • 渠道 Channel
      • 备份 Backup
        • 档案 File
        • 链接 Link
    • 💪第三方支持
      • SubDID (.bit)
      • IM (Sending.Me)
      • SBT (Ensoul)
      • 链上 ZK 存储 (zCloak)
    • 🕹️游戏化设计
      • NPC — 对话式副本任务
      • 技能树 — 成长路径设计
      • 叠Buff — SBT 报酬加成
    • 🔌插件开发
      • 前端 OS Widget
      • 独立插件
  • 🙋协作贡献 Collaboration
    • 🤟加入项目
    • 📋项目看板
    • 📐协作规范
      • 产权与开源条款
        • SeeDAO OS 贡献者协议 (SCA)
      • 项目激励与要求
      • 反馈回报
      • 项目推广
      • 术语词汇表
    • 🤠非技术贡献者
      • 游戏化小组
      • 自动化小组
    • 🤓技术贡献者
      • 主干开发
      • 代码规范
Powered by GitBook
On this page
  • 页面开发
  • 状态管理
  • 使用第三方套件 & 呼叫 API
  • 重构:抽象到 Stores, Services 与 Helpers 中
  1. 知识库 Knowledge Base
  2. 技术架构

前端 - Vue3

由于 SeeDAO OS 是从 Vue2 升级到 Vue3,仍然保留一部份兼容 Vue2 的代码,因此目录结构为:

/public
/src
├─--- /assets
├─--- /components
├─--- /config
├─--- /constants
├─--- /data
├─--- /helpers
├─--- /locales
├─--- /pages
├─--- /router
├─--- /services
└─--- /store

页面开发

大多数的页面都在 /components 与 /pages 中,请注意:

  • 可以重复使用的模块请放在 compnents,而非在 pages 下建立子目录引用

状态管理

任何在前端中需要持久化管理的状态(例如 API 回传的数据),请使用 Vuex 进行状态管理:

使用第三方套件 & 呼叫 API

请不要直接在 .vue 中呼叫 API 与使用第三方套件,所有的操作都应该在 /services 中建立 module:

主要的业务逻辑请与前端展示解耦,尽可能的集中到 /services 中的模块,你可以将使用到的:

  1. Utils 函数,放到 /helpers 中并引用

  2. 常数放到 /constants 中并引用

  3. 设置放到 /config 中并引用(可由环境变数触发套用不同设置)

你可以在前端页面上直接输入 Services 使用(例如对于LocalStorage 使用),然而涉及到 API 呼叫与回传的,请尽可能地经过 Vuex 进行状态管理,再从页面展示上使用。

重构:抽象到 Stores, Services 与 Helpers 中

当然,有时后可能代码质量不那么好,后续需要进行重构,重构的工作请尽可能的把在 .vue 中的函数与状态,往回放到 Stores, Services 与 Helpers 中。

Previous技术栈Next国际化

Last updated 2 years ago

📙
🏗️
状态管理 Vuex