asai-vue-host

A simple vue host for asai development.

npm i asai-vue-host -g

LibInit.ts

// 从vue中导入ref, reactive, toRaw, defineAsyncComponent函数，用于实现响应式数据和异步组件加载
import { ref, reactive, toRaw, defineAsyncComponent } from 'vue';

// 导出一个默认函数，用于初始化库
// 此函数返回一个包含lib对象的对象，lib对象包含一些属性和方法，用于处理组件、指令和模块的加载
// eager: 表示是否立即加载资源
// ref, reactive, toRaw: Vue的响应式工具函数，用于创建和管理响应式数据
// loadfn: 包含异步组件加载函数，用于异步加载Vue组件
// vuecomps: 存储已加载的组件，避免重复加载
// loadts: 加载TypeScript模块，并将其挂载到全局属性上
// loadv: 加载Vue指令，并将其注册到应用中
// loadvue: 加载Vue组件，并将其注册到应用中
// 返回值: 包含lib对象的对象
export default () => {
    // 定义库对象，包含一些属性和方法，用于处理组件、指令和模块的加载
    const lib: any = {
        eager: true,
        ref,
        reactive,
        toRaw,
        loadfn: {
            fnvue: defineAsyncComponent,
        },
        vuecomps: {},
    };

    // 加载TypeScript模块，并将其挂载到全局属性上
    lib.loadts = (params: any = {}) => {
        const ens: any = {};
        for (const i in params.files) {
            const nArr = i.split('/');
            ens[nArr[nArr.length - 1].slice(0, -3)] = params.files[i].default;
        }
        params.app.config.globalProperties[params.key] = ens;
    };
    // 加载Vue指令，并将其注册到应用中
    lib.loadv = (params: any = {}) => {
        for (const i in params.files) {
            const cname: string = i.split('/v-')[1].split('/')[0];
            if (cname && !lib.vuecomps[cname]) {
                lib.vuecomps[cname] = 1;
                params.app.directive(cname, params.files[i].default);
            }
        }
    };
    // 加载Vue组件，并将其注册到应用中
    lib.loadvue = (params: any = {}) => {
        for (const i in params.files) {
            if (params.eager) {
                const component = params.files[i].default;
                const cname = params?.fullname ? i : component.__name;
                if (cname && !lib.vuecomps[cname]) {
                    lib.vuecomps[cname] = component;
                    params.app.component(cname, component);
                } else {
                }
            } else {
                const cname = params?.fullname
                    ? i
                    : i.substring(0, i.lastIndexOf('.'))?.split('/').pop();
                if (cname && !lib.vuecomps[cname]) {
                    lib.vuecomps[cname] = params.loadfn.fnvue(params.files[i]);
                    params.app.component(cname, lib.vuecomps[cname]);
                } else {
                }
            }
        }
    };

    // 返回包含lib对象的对象，供外部使用
    return { lib };
};

AsInstall.ts

import LibInit from './LibInit';

// 导入asasai模块（前置必须的模块，先加载）
import asasai from 'asai-vue-host';
import '/node_modules/asai-vue-host/dist/asai-vue-host.css';


export default {
    install(app: App) {
        const { lib } = LibInit();
        asasai.install(app, lib); // 挂载系统插件

        // 其他初始化操作
    },
};

main.ts中加载使用

// 插件实现部分
import AsInstall from './AsInstall';

// 创建 Vue 应用实例
const app = createApp(App);
// 使用插件 AsInstall
app.use(AsInstall);