How to use the omi.Component function in omi

import Omi from 'omi';
import OmiJQueryDatePicker from '../../omi-jquery-date-picker.js';

OmiJQueryDatePicker.init();

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.data.date = '';
    }

    applyHandle(evt, obj){
        console.log('apply', obj);
        console.log(this.datePicker);
        this.data.date = this.refs.dateInput.value;
    }

    render() {
        return  `
        <div>
            <input value="${this.data.date}" size="40">
        </div>

import Omi from 'omi';
import config from '../../docs/config.js';
import OmiFinger from 'omi-finger';

OmiFinger.init();

class Pager extends Omi.Component {
    constructor (data) {
        super(data);
        this.activeIndex = 0;
        this.currentIndex = 0;
    }

    updatePager() {
        this.data.preMd = null;
        this.data.preName = null;
        this.data.nextMd = null;
        this.data.nextName = null;
        let item = config.menus[this.data.lan][this.activeIndex];

        let pre = item.list[this.currentIndex - 1];
        if (pre) {
            this.data.preMd = pre.md;

import Omi from 'omi'

class UserList extends Omi.Component {
    constructor(data) {
        super(data)
    }

    install() {
        this.data.uin_info || (this.data.uin_info = [])
        this.data.uin_info.forEach(user => {
            this.prepareData(user)
        })
        this.done = false
    }

    prepareData(user){
        user.desc_d = user.desc.split(" ")[0]
        user.desc_t = user.desc.split(" ")[1]
        user.isBoy = user.sex === "男"

import Omi from 'omi'

class About extends Omi.Component {
    render() {
        return  <div>About</div>
    }
}

Omi.tag('about',About)

export default  About

import Root from './config.js';
import Omi from 'omi';

import Header from '../component/header/index.js';
import Footer from '../component/footer/index.js';

Omi.tag('header', Header);
Omi.tag('footer', Footer);

class Main extends Omi.Component {
    constructor (data) {
        super(data);
    }

    style () {
        return `
        .main{
            position:fixed;
            height:45px;
            line-height: 145px;
            text-align:center;
            width:100%;
            background-color:blue;
            z-index:100;
        }
        `;

import Omi from 'omi';

const tpl = require('./index.html');
const css = require('./index.css');

class List extends Omi.Component {
    constructor(data) {
        super(data);
        Omi.mixIndexToArray(this.data.list);
        this.data.currentIndex = 0;
        var self = this;
        this.data.isCurrent = function () {
            return (this.index === self.data.currentIndex) && self.data.active;
        }
    }

    goto(name, index) {

        Omi.get('content').data.name = name;
        Omi.get('content').update();
        this.data.currentIndex = index;
        this.parent.children.forEach((child,index) => {

import Omi from 'omi'

class Home extends Omi.Component {
    render() {

      	return <div>Home</div>

    }
}

Omi.tag('home',Home)

export default  Home

import Root from './config.js'
import Omi from 'omi'
import UserList from '../component/user_list/index.js'

Omi.makeHTML('UserList', UserList)

class Main extends Omi.Component {
    constructor(data) {
        super(data)
    }

    installed() {
        window.onscroll = () => this.loadMore()
        this.requestData(data => this.list.appendUsers(data))
    }

    loadMore() {
        const body = document.body,
            html = document.documentElement,
            height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
            vp_height = window.innerHeight

        if (height - document.body.scrollTop - vp_height < 200) {

import Omi from 'omi';
import List from './list/index.js';
import config from '../docs/config.js';

Omi.makeHTML('List', List);

class Sidebar extends Omi.Component {
    constructor(data) {
        super(data);
    }

    install () {
        this.data.items = config['menus'][this.data.lan] ;
        this.data.height = window.innerHeight -45;
    }

    style () {
        return `
    <style>
        @media only screen and (max-width: 768px) {
            .list{
                transform: translateX(-100%);
                background-color:white;</style>

import Omi from 'omi';

class UserList extends Omi.Component {

    render() {
        return  `
      	 <ul>
      	    <li><a>yanagao</a></li>
            <li><a>vorshen</a></li>
            <li><a>dntzhang</a></li>
        </ul>
  		`;
    }
}


Omi.tag('UserList',UserList)

export default  UserList