kylin-framework

完整文档可参考 ...

install

npm install kylin-framework --save

Page

Page 页面

页面声明结构

import { Page } from 'kylin-framework';
import IndexComponent from './indexComponent.vue';

class IndexPage extends Page {
  
  initOptions() {
    return {}
  }
  
  render(h) {
    return <IndexComponent></IndexComponent>
  }
  
}

new IndexPage('#app');

Component 组件

Kylin Component 扩充自Vue的组件, 提供了Vue组件对等的输入参数能力。在代码书写时提供类class的装饰器Decorator风格。

代码引入

import { Component, Watch } from 'kylin-framework';

组件声明结构

一个组件可以包含数据、JSX渲染函数、模板、挂在元素、方法、声明周期等Vue的options选项的对等配置。 组件声明包括以下几部分, 分别使用@Component, @Watch两种不同装饰器进行包装：

• class类声明, 使用装饰器@Component
• 类成员声明, 不使用装饰器
• 类成员方法声明, 一般不装饰器, 除非该方法需要watch另外一个已声明的变量

JSX组件

/* Hello.js */
import { Component } from 'kylin-framework';
import Child from './child.vue';

@Component
class Hello {
  data = {
    name: 'world'
  }
  
  render() {
    return (
      <div>hello {this.data.name}
        <Child></Child>
      </div>)
  }
}

*.vue单文件组件

<!-- Hello.vue --> 

<template>
  <div>hello {{name}}
    <Child></Child>
  </div>
</template>

<style>
  /* put style here */
</style>

<component default="Child" src="./child.vue" />

<script>
  import { Component } from 'kylin-framework';
  
  @Component
  class Hello {
    data = {
      name: 'world'
    }
  }
 
  export default Hello;
</script>