74 lines
2.6 KiB
Markdown
74 lines
2.6 KiB
Markdown
# SIMRS - FE
|
|
|
|
RSSA - Front End
|
|
|
|
## Framework Guide
|
|
|
|
- [Vue Style Guide](https://vuejs.org/style-guide)
|
|
- [Nuxt Style Guide](https://nuxt.com/docs/4.x/guide)
|
|
|
|
## Configuration
|
|
|
|
- `nuxt.config.ts`<br />Nuxt configuration file
|
|
- `.env`<br />Some environment variables
|
|
|
|
## Directory Structure for `app/`
|
|
|
|
- `app.vue`: Main layout
|
|
- `components` : Contains all reusable UI components.
|
|
- `components/flow` : Entry point for business logic and workflows. Pages or routes call these flow components to handle API requests and process application logic
|
|
- `components/app` : View-layer components that manage and present data. These are used within `flow/` to render or handle specific parts of the UI, and return results back to the flow
|
|
- `components/pub` : Public/shared components used across different parts of the app.
|
|
- `composables` : Contains reusable logic and utility functions (e.g. composables, hooks)..
|
|
- `layouts` : Reusable UI layout patterns used across pages.
|
|
|
|
## Directory Structure for `app/pages`
|
|
|
|
- `pages/auth` : Authentication related pages.
|
|
- `pages/(features)` : Grouped feature modules that reflect specific business flow or domains.
|
|
|
|
## Directory Structure for `server/`
|
|
|
|
- `server/api` : API or proxy requests
|
|
|
|
## Workflows
|
|
|
|
The basic development workflow follows these steps:
|
|
|
|
### Define Your Data in `models/`
|
|
|
|
- Create data definitions or interfaces.
|
|
- These should represent the structure of the data used across your app.
|
|
|
|
### Build UI Components in `components/app`
|
|
|
|
- Create reusable UI and app specific components.
|
|
- Keep components pure, avoid making HTTP requests directly within them.
|
|
- They receive data via props and emit events upward.
|
|
|
|
### Business Logic in `components/flow`
|
|
|
|
- This layer connects the UI with the logic (API calls, validations, navigation).
|
|
- It composes components from `components/app/`, `components/pub/`, and other flow.
|
|
- Also responsible for managing state, side effects, and interactions.
|
|
|
|
### Create Pages in `pages/`
|
|
|
|
- Pages load the appropriate flow from `components/flow/`.
|
|
- They do not contain UI or logic directly, just route level layout or guards.
|
|
|
|
## Git Workflows
|
|
|
|
The basic git workflow follows these steps:
|
|
|
|
1. Create a new branch on `dev`
|
|
- branch name should be `feat/<feature-name>` or `fix/<bug-name>`
|
|
2. Make your changes
|
|
3. Commit your changes
|
|
- commit msg format: `[type]: [description]`
|
|
- `type` can be `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
|
|
- `description` should be a brief description of the changes
|
|
- Example: `feat: add new feature`
|
|
4. Push your changes to `dev`
|
|
5. Create a pull request from `dev` to `main`
|