创建Application

创建应用的流程 创建工作空间(继承实例) => 创建工作台(注入插件及依赖) => 生成应用程序上下文 => uxmid启动应用程序

创建工作空间(继承实例)

创建工作空间,继承自 Vue 实例,或者 ReactComponent。 以下以Vue为例。

// workspace.ts
import Vue, { CreateElement } from "vue";

import uxmid, { IWorkbench } from "uxmid-core";
import ApplicationContext from "./context";

/**
 * 提供工作空间的常用功能。
 * @class
 * @version 1.0.0
 */
export default class Workspace extends Vue
{
    private _workbench: IWorkbench;

    /**
     * 获取工作空间所属的工作台实例。
     * @property
     * @returns IWorkbench
     */
    public get workbench(): IWorkbench
    {
        return this._workbench;
    }
    
    /**
     * 初始化工作空间的新实例。
     * @constructor
     * @param  {IWorkbench} workbench 工作台实例。
     * @param  {Router} router 主路由程序。
     */
    public constructor(workbench: IWorkbench)
    {
        let options =
        {
            el: "#workspace",
            router: ApplicationContext.current.router,
            store: ApplicationContext.current.store,
            render(h: CreateElement)
            {
                return h("div",{ attrs: { id: "workspace" } }, [ h("router-view") ]);
            }
        };

        // 传入配置进行初始化
        super(options);

        // 保存工作台
        this._workbench = workbench;
    }
}

创建工作台(注入插件及依赖)

// workbench.ts
import Vue from "vue";
import uxmid, { WorkbenchBase, ApplicationContextBase } from "uxmid-core";

/**
 * 提供工作台的基本封装。
 * @class
 * @version 1.0.0
 */
export default class Workbench extends WorkbenchBase
{
    private _workspace: Workspace;
    
    /**
     * 获取当前应用的主工作空间。
     * @property
     * @returns Workspace
     */
    public get workspace(): Workspace
    {
        return this._workspace;
    }

    /**
     * 初始化工作台的新实例。 
     * @param  {ApplicationContextBase} applicationContext
     */
    public constructor(context: ApplicationContextBase)
    {
        super(context);
    }
    
    /**
     * 当工作台打开时调用。
     * @async
     * @protected
     * @virtual
     * @param  {Array<string>} args
     * @returns void
     */
    protected async onOpen(args: Array<string>): Promise<void>
    {
        let context = this.applicationContext as ApplicationContext;

        // 关闭生产提示
        Vue.config.productionTip = false;

        Vue.config.errorHandler = (err, vm, info) =>
        {
            // handle error
            // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
            // 只在 2.2.0+ 可用
            console.error(err, vm, info);
        };

        Vue.config.warnHandler = (msg, vm, trace) =>
        {
            // `trace` 是组件的继承关系追踪
            console.error(msg, vm, trace);
        };

        // 注册日志处理程序
        Logger.handlers.add(new ConsoleLogHandler());

        // 初始化系统及自定义组件
        this.initializeComponent(context);

        // 初始化第三方组件
        this.initializeCustomComponent(context);
        
        // 初始化路由程序
        this.initializeRouter(context);

        // 初始化状态管理程序
        this.initializeStore(context);
        
        // 初始化全局指令
        this.initializeDirectives(context);

        // 初始化全局过滤器
        this.initializeFilters(context);

        // 初始化 http 客户端
        this.initializeHttpClient(context);

        // 初始化工作空间
        this._workspace = this.createWorkspace();
    }
    
    /**
     * 创建一个工作空间对象。
     * @override
     * @returns IWorkspace
     */
    protected createWorkspace(): Workspace
    {
        return new Workspace(this);
    }
}

生成应用程序上下文

// context.ts
import Router from "vue-router";
import { Store } from "vuex";

import { IWorkbench, ApplicationContextBase, InvalidOperationException } from "uxmid-core";
import Workbench from "./workbench";
/**
 * 包含当前应用程序的上下文实例。
 * @class
 * @version 1.0.0
 */
export default class ApplicationContext extends ApplicationContextBase
{
    private _router: Router;
    private _store: Store<any>;

    /**
     * 获取或设置当前应用的主路由对象。
     * @property
     * @returns Router
     */
    public get router(): Router
    {
        return this._router;
    }
    
    public set router(value: Router)
    {
        if(!value)
        {
            throw new InvalidOperationException();
        }

        this._router = value;
    }
    
    /**
     * 获取或设置当前应用的状态管理对象。
     * @property
     * @returns Store<any>
     */
    public get store(): Store<any>
    {
        return this._store;
    }
    
    public set store(value: Store<any>)
    {
        if(!value)
        {
            throw new InvalidOperationException();
        }

        this._store = value;
    }

    /**
     * 获取当前应用程序的上下文实例。
     * @static
     * @member
     */
    public static readonly current: ApplicationContext = new ApplicationContext();
    
    /**
     * 私有构造函数。
     * @private
     */
    protected constructor()
    {
        super("uxmid-web");
    }
    
    /**
     * 创建一个工作台对象。
     * @override
     * @returns IWorkbench
     */
    protected createWorkbench(args: Array<string>): IWorkbench
    {
        return new Workbench(this);
    }
}

uxmid启动应用程序

// main.ts
import { Application } from "flagwind-core";
import ApplicationContext from "./context";

// 获取应用上下文
const context = ApplicationContext.current;

// 启动应用程序
Application.start(context);