Vue3 Typescript Template With Quasar framework

November 6, 2025 · View on GitHub

ENGLISH SUMMARY: ARCHITECTURE AND TECH STACK

Architecture Design and Tech Stack Summary: Hybrid Class and Composition API Paradigm

This project adopts a highly optimized hybrid programming paradigm, aiming to combine the structural benefits of Class syntax with the flexibility of the Composition API, ensuring maintainability and clarity in complex projects.

I. Core Tech Stack and Paradigm

Module Key Tool Architectural Role
Class Syntax Core vue-facing-decorator Used for implementing business pages and Vuex modules, providing an object-oriented structure.
State Management vuex-module-decorators Implements type-safe Class-based Vuex modules.
Base Components Standard Vue 3 setup Syntax Used for building general, loosely coupled base components (e.g., pagination, form inputs).
Build Environment Webpack 5 Responsible for handling the compilation and compatibility of Class structures and modern JavaScript.

II. Design Advantages and Maintainability

Structure over Flatness: In complex business pages, Class syntax provides a more organized and intuitive alternative to the raw Composition API setup logic.

Inheritance Model: Component extension utilizes the clean extend syntax (instead of mixin), ensuring a clear inheritance chain and more reliable type inference.

Modular Design: Base component libraries (e.g., Pagination) are modularly encapsulated, achieving high reusability.

III. Business Code Organization (Class Area Segmentation)

The Class structure enforced on business code mandates clear functional segmentation, significantly enhancing code readability and maintenance efficiency:

Class Member Area Functional Description Purpose
props External Interface Definition Declares the component's external input data.
get / set Computed Properties Manages derived state and two-way binding logic.
watch Reactive Side Effects Centralizes logic for handling state change listeners.
params Parameters & Configuration Unifies the declaration of all required request parameters or internal configurations.
event (e.g., handleClick) User Interaction Handling Clearly defines methods triggered by user actions.
http (Async/Await) Asynchronous Requests Centralizes and executes all HTTP data fetching logic, optimizing data flow tracing.

Module	Key Tool	Architectural Role
Class Syntax Core	`vue-facing-decorator`	Used for implementing business pages and Vuex modules, providing an object-oriented structure.
State Management	`vuex-module-decorators`	Implements type-safe Class-based Vuex modules.
Base Components	Standard Vue 3 `setup` Syntax	Used for building general, loosely coupled base components (e.g., pagination, form inputs).
Build Environment	Webpack 5	Responsible for handling the compilation and compatibility of Class structures and modern JavaScript.

Class Member Area	Functional Description	Purpose
`props`	External Interface Definition	Declares the component's external input data.
`get` / `set`	Computed Properties	Manages derived state and two-way binding logic.
`watch`	Reactive Side Effects	Centralizes logic for handling state change listeners.
`params`	Parameters & Configuration	Unifies the declaration of all required request parameters or internal configurations.
`event` (e.g., `handleClick`)	User Interaction Handling	Clearly defines methods triggered by user actions.
`http` (Async/Await)	Asynchronous Requests	Centralizes and executes all HTTP data fetching logic, optimizing data flow tracing.

中文总结：架构设计与开发规范

架构设计与开发规范总结：基于 Class 与 Composition API 的混合范式

该项目采用了一种高度优化的混合编程范式，旨在结合 Class 语法的结构优势和 Composition API 的灵活性，确保复杂项目的可维护性和清晰度。

I. 核心技术栈与范式

模块关键工具架构角色
Class 语法核心 vue-facing-decorator 负责业务页面和Vuex 模块的实现，提供面向对象的代码结构。
状态管理 vuex-module-decorators 实现类型安全的 Class-based Vuex 模块。
基础组件 标准 Vue 3 setup 语法用于构建通用、低耦合的组件库（如分页、表单输入）。
构建环境 Webpack 5 负责处理所有 Class 结构和现代 JavaScript 的转译与兼容性。

II. 设计优势与可维护性提升

结构化优于扁平化： 在复杂的业务页面中，Class 语法比 Composition API 的 setup 逻辑更直观、更具组织性。

继承模型： 组件扩展使用清晰的 extend 语法，避免了 mixin 带来的隐式依赖和属性冲突问题。

模块化设计： 基础组件库（例如 Pagination）采用模块化封装，实现高复用性。

III. 业务代码组织规范 (Class 区域划分)

使用 Class 结构强制对业务逻辑进行清晰的分层，显著提升了代码的可读性和维护效率：

Class 成员区域对应功能描述作用
props 外部接口定义声明组件的外部输入数据。
get / set 计算属性负责派生状态和双向绑定逻辑。
watch 响应式副作用集中处理状态变化时的监听逻辑。
params 参数与配置统一声明组件所需的所有请求参数或内部配置。
event (e.g., handleClick) 事件处理明确定义由用户交互触发的方法。
http (Async/Await) 异步请求集中管理和执行所有 HTTP 数据请求，优化数据流追踪。

模块	关键工具	架构角色
Class 语法核心	`vue-facing-decorator`	负责业务页面和Vuex 模块的实现，提供面向对象的代码结构。
状态管理	`vuex-module-decorators`	实现类型安全的 Class-based Vuex 模块。
基础组件	标准 Vue 3 `setup` 语法	用于构建通用、低耦合的组件库（如分页、表单输入）。
构建环境	Webpack 5	负责处理所有 Class 结构和现代 JavaScript 的转译与兼容性。

Class 成员区域	对应功能描述	作用
`props`	外部接口定义	声明组件的外部输入数据。
`get` / `set`	计算属性	负责派生状态和双向绑定逻辑。
`watch`	响应式副作用	集中处理状态变化时的监听逻辑。
`params`	参数与配置	统一声明组件所需的所有请求参数或内部配置。
`event` (e.g., `handleClick`)	事件处理	明确定义由用户交互触发的方法。
`http` (Async/Await)	异步请求	集中管理和执行所有 HTTP 数据请求，优化数据流追踪。

Vue3 Class syntax online preview https://dirkhe1051931999.github.io/v3-admin
Vue2 Class syntax preview https://dirkhe1051931999.github.io/quasar

Login by typing in any username, code and password

Preview

Dashboard

Table component

Install the dependencies (only support yarn)

yarn

Start the app in development mode (hot-code reloading, error reporting, etc.)

yarn dev

Lint the files

yarn lint
# or
npm run lint

Format the files

yarn format
# or
npm run format

generate svg

npm run svg
# will generate svg map file -> src/utils/custom-svg.ts

Build the app for production

npm run build

Customize the configuration

See Configuring quasar.config.js.