前端 - 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 进行状态管理:

状态管理 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 中。

Last updated