Skip to content
IoC with vue
TypeScript Shell JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
build
examples
src
.gitignore
.travis.yml
LICENSE
README.md
README_US.md
commitlint.config.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

EUV

基于 Vue 的控制反转 ——— 依赖于抽象 优于依赖于实体.

很多开发者都知道这种设计模式,但在 Vue 社区里却不多见,甚至没有一个可以使用的库。本项目是使用 TypeScript 与控制反转的模式来编写 Vue 的尝试, 有关更多的设计细节和语法,欢迎 讨论

English doc

示例项目

  1. 下载示例项目git clone git@github.com:DhyanaChina/euv-guide.git

  2. 安装依赖并运行: cd euv-guide && npm i && npm start

起步

  • 安装

    npm i --save euv

  • 开始使用 euv

    // 在 app.ts 文件中:
    
    import 'reflect-metadata'
    import Vue from 'vue'
    import { Container } from 'euv'
    import { AppModule } from  './module'
    const container = new Container(AppModule)
    
    new Vue({
      el: '#app',
      render: h => h(container.VueHook('app')),
    })
    
    
    // 在 ./module.ts 文件中收集容器的依赖:
    import { WelcomeComponent } from './app.component'
    
    @Module({
      providers: {
        app: WelcomeComponent,
      },
    })
    export class AppModule {
    }
    
  • 使用注解与类的方式来编写 Vue

    @Component({
      template: `<p>{{ message }}</p>`
    })
    export class AppComponent {
    
      message: string = 'hi!'
    
    }
  • 注入一个服务

    @Component(...)
    export class HelloComponent {
    
      constructor(
        private apis: ApiService,
      ) {
      }
      mounted(): void {
        this.apis.requestBannerImages()
      }
    }
  • 服务之间也可以互相注入

    @Injectable()
    export class LoggerService {
    }
    
    @Injectable()
    export class AuthService {
    
      constructor(
        private logger: LoggerService,
      ) {
      }
    }
  • 使用令牌注入

    // 声明服务
    @Injectable()
    export class LoggerService {}
    
    // 声明模块
    @Module({
      providers: { logger: LoggerService },
    })
    export class AppModule {
    }
    
    // Inject 会通过 'logger' 标记自动帮你注入 Logger 服务
    @Injectable()
    export class AuthService {
    
      constructor(
        @Inject('logger') private logger: any,
      ) {
      }
    }
  • 可选注入

    // 当出现互相依赖或不确定是否能加载时,可以使用 Optional
    // 同时你可以为注入项提供默认值
    @Injectable()
      export class AuthService {
    
        constructor(
          @Optional() @Inject('user') private user: any = { token: 0 },
        ) {
        }
      }
  • Prop 传递数据

    // 只需要声明一次类型,类型也会得到验证
    // 声明默认值后会自动附加在 Vue 的 Props 中
    
    @Component({ ... })
    export class Demo {
    
      @Prop() username: string = 'witt'
    
    }



更多

You can’t perform that action at this time.