什么是Cabloy-Front？

Cabloy-Front 是一款支持 IOC 容器的 Vue3 框架。不用ref/reactive，不用ref.value，不用pinia

與UI庫的配合

Cabloy-Front 可以搭配任何 UI 庫使用，并且內置了幾款 UI 庫的項目模版，便于開箱即用，包括：

• antdv
• element-plus
• quasar
• vuetify

特性

Cabloy-Front 為 Vue3 引入了以下鮮明特征：

• 不用ref/reactive：因為在大多數場景下，不需要使用 ref 和 reactive
• 不用ref.value：因為在 Cabloy-Front 中定義響應式變量更加直觀，不再需要 ref 語義
• 不用pinia：因為 Cabloy-Front 提供了 IOC 容器，可以更加靈活的定義和使用全局對象

動圖演示

演示：不用ref/reactive，不用ref.value

1. 定義響應式狀態

@Local()
export class MotherPageCounter extends BeanMotherPageBase {counter: number = 0;inrement() {this.counter++;}decrement() {this.counter--;}
}

2. 使用響應式狀態

@Local()
export class RenderPageCounter extends BeanRenderBase {render() {return (<div><div>counter(ref): {this.counter}</div><button onClick={() => this.inrement()}>Inrement</button><button onClick={() => this.decrement()}>Decrement</button></div>);}
}

演示：依賴注入

1. 邏輯抽離

將counter邏輯抽離出來，創建一個Counter Bean

@Local()
export class LocalCounter extends BeanBase {counter: number = 0;inrement() {this.counter++;}decrement() {this.counter--;}
}

2. 在組件中注入并使用

@Local()
export class MotherPageCounter extends BeanMotherPageBase {@Use()$$counter: LocalCounter;
}

@Local()
export class RenderPageCounter extends BeanRenderBase {render() {return (<div><div>counter(ref): {this.$$counter.counter}</div><button onClick={() => this.$$counter.inrement()}>Inrement</button><button onClick={() => this.$$counter.decrement()}>Decrement</button></div>);}
}

框架已開源： https://github.com/cabloy/cabloy-front