cabloy / cabloy-front

🚀A vue3 framework with ioc container. With the support of ioc container, defining reactive states no longer needs ref/reactive, nor ref.value

Cabloy-Front

Cabloy-Front is a vue3 framework with ioc container. With the support of ioc container, defining reactive states no longer needs ref/reactive, nor ref.value

Documentation

• Get Started
• Why Vue3+IOC?

With UI libraries

Cabloy-Front can be used with any UI library and comes with built-in project templates for several UI libraries, making it easy to use out of the box, including:

• antdv
• element-plus
• quasar
• vuetify

Features

Cabloy-Front has introduced the following distinct features for Vue3:

1. No ref/reactive: With the support of ioc container, defining reactive states no longer needs ref/reactive
2. No ref.value: Without ref, naturally there is no need to write a lot of ref.value
3. Modularization: In a large web business system, as the business grows and changes, it is also necessary to divide the system into relatively independent modules in order to avoid code bloating. This is why Cabloy-Front introduces modularization

Gif demonstration

Demonstration: no ref/reactive, no ref.value

1. Define reactive state

Define a reactive variable count in the component and add two methods to modify its value

export class MotherPageCounter {
  count: number = 0;

  inrement() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

2. Use reactive state

Use count in render class

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

Demonstration: dependency injection

1. Logic Reuse

Create a Counter Bean to implement the logic of count

@Local()
export class Counter {
  count: number = 0;

  inrement() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

2. Inject and use in a component

export class MotherPageCounter {
  @Use()
  $$counter: Counter;
}

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

Stay In Touch

• Twitter
• Wechat

License

MIT

Copyright (c) 2016-present, zhennann