Frontend Standards Overview
This chapter defines all standards required for frontend development in TQS-certified projects. It consists of 6 categories, 13 topics, and 50 detailed items.
Code and Components
Standards for Vue.js component authoring rules and the TypeScript type system.
| Topic | Detailed Items |
|---|---|
| Vue.js Component Standards (Chapter 10) | Composition API basic rules, component naming and design, directory structure, SFC authoring rules |
| TypeScript Usage Standards (Chapter 11) | Type definition rules, Props/Emits typing, utility types, type guards and assertions |
Routing and State Management
Standards for Vue Router configuration and Pinia state management.
| Topic | Detailed Items |
|---|---|
| Vue Router (Chapter 12) | Router configuration, route guards, lazy loading, naming conventions |
| Pinia State Management (Chapter 13) | Setup Store standards, store design rules, reactivity patterns, store testing |
Data Communication
Standards for API communication and form handling.
| Topic | Detailed Items |
|---|---|
| API Client (Chapter 14) | Axios configuration, interceptors, error handling, authentication token management |
| Forms and Validation (Chapter 15) | Form patterns, validation rules, server error integration, file upload |
Build and Tooling
Standards for Vite build tools and code quality tools.
| Topic | Detailed Items |
|---|---|
| Vite Build Configuration (Chapter 16) | Configuration files, environment variables, build optimization |
| ESLint + Prettier (Chapter 17) | ESLint configuration, Prettier configuration, VSCode integration, husky + lint-staged |
UI and Styling
Standards for Tailwind CSS and accessibility.
| Topic | Detailed Items |
|---|---|
| Tailwind CSS (Chapter 18) | Configuration and initialization, utility rules, component styling, responsive design |
| Accessibility (Chapter 19) | WCAG 2.1 criteria, ARIA attributes, keyboard navigation |
Testing and Quality
Standards for frontend testing, performance, and internationalization.
| Topic | Detailed Items |
|---|---|
| Frontend Testing (Chapter 20) | Vitest configuration, component testing, composable testing, coverage criteria, E2E testing overview |
| Performance Optimization (Chapter 21) | Core Web Vitals, code splitting, image optimization, bundle monitoring |
| Internationalization (Chapter 22) | vue-i18n configuration, translation file structure, locale formatting |