当前位置：首页 > news >正文

KVA教程-插件开发

news 来源：原创 2025/6/8 3:07:07

请添加图片描述

“如果结果不如你所愿，就在尘埃落定前奋力一搏。”——《夏目友人帐》
“有些事不是看到了希望才去坚持，而是因为坚持才会看到希望。”——《十宗罪》
“维持现状意味着空耗你的努力和生命。”——纪伯伦

KVA 技术教程 * 插件开发

简介

插件开发是KVA（koi-vite-admin）的主要核心技术，它使的项目的功能进行解耦，在提升系统灵活性的同时，通过插件的插拔技术极大的增强了系统的扩展性。下面我们来了解下它是如何进行开发和解决业务解耦的问题。

KVA（koi-vite-admin）是一个基于vue3+vite的前端插件式开发技术平台，它采用约定配置原思想来进行应用开发，减少前端使用者的负担，使得springboot的开发者平稳过渡到前端技术生态中，就像在application.yml
中开发一样，引入配置依赖，添加项目配置，便可完成功能的集成和卸载。

概念

在KVA的插件系统中有五个核心的概念；

配置
上下文
样式
实例化
销毁

1. 配置

插件配置用于让用户定义插件的属性和行为，为插件的运行提供先决条件，它通过插件构造器的方式来进行注入，在插件的生命周期中保持可变状态。

2. 上下文

上下文使KVA的插件全局对象，她负责为插件提供全局对象，如：app (vue 对象)，pinia: 状态管理对象。你可以在任意插件中获取并使用他们。

3. 样式

插件的开发离不开样式的处理，每个插件你需要为它定义一个通用全局样式，并注意样式的隔离。

4. 实例化

此为插件的核心实现部分，你需要定义插件的具体行为和逻辑结构，以便是他可以按照你设定的方式完成对应的功能。

5. 销毁方法

在插件的运行期间，你可以面临重新挂载的问题，此时你需要完善你的销毁方法，并在合适的地方调用他们。

6. 构建

插件的构建不同于传统的前端项目，他需要保存活性特性的同时完成应用缝合工作，KVA使用Vite6作为构建工具，配置方式参见示例代码。

插件示例

以一个自定义UI的插件为例

1. 目录结构

在这里插入图片描述

2. package

{"name": "@elcker/koi-plugin-ui","version": "0.0.6","description": "","preferGlobal": true,"main": "dist/index.js","module": "dist/index.js","types": "dist/types/index.d.ts","style": "dist/index.css","type": "module","exports": {".": {"import": "./dist/index.js"},"./dist/": "./dist/"},"files": ["dist"],"scripts": {"build": "rimraf dist && vite build --emptyOutDir && pnpm build:types","build:types": "vue-tsc --declaration --emitDeclarationOnly  --skipLibCheck"},"publishConfig": {"access": "public"},"peerDependencies": {"@elcker/koi-site-core": "^0.5.0",},"engines": {"node": ">= 20.0.0"}
}

2. src-index.ts

import { KoiPlugin } from "@elcker/koi-site-core";import { KoiBase } from "./src";interface KoiPluginUIOptions {showBanner?: boolean;
}class KoiPluginUI extends KoiPlugin {version = "0.0.1";author = "elcker";name = "koi-plugin-ui";constructor(options: KoiPluginUIOptions) {super(options);}install({ koiCxf }: any) {this.beforeBanner();koiCxf.app.component("KoiBase", KoiBase);this.afterBanner();}destroy() {}
}export default (options: KoiPluginUIOptions) => {return new KoiPluginUI(options);
};

3. vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";export default defineConfig({publicDir: false,plugins: [vue(),],resolve: {alias: [{find: "@",replacement: path.resolve(process.cwd(), ".", "src"),},],},css: {preprocessorOptions: {less: {javascriptEnabled: true,},scss: {api: "modern-compiler", },},postcss: {},},build: {outDir: "dist", // 输出目录//minify: 'terser',cssCodeSplit: false,emptyOutDir: true,lib: {entry: path.resolve(process.cwd(), "./src/index.ts"),formats: ["es"],fileName: (name) => `index.js`,},rollupOptions: {// 模块的上下文context: "globalThis",// 入口块中创建与相应入口模块中完全相同的导出preserveEntrySignatures: "strict",// 核心输入选项external: ["ts", "tsx", "js", "vue"],output: {globals: {vue: "Vue",},chunkFileNames: "js/[name]-[hash:8].js",manualChunks: (id) => {if (id.includes("node_modules")) {return id.toString().split("node_modules/")[1].split("/")[0].toString();}},entryFileNames: ({ name }) => {return name === "index" ? "index.js" : "[name]/index.js";},assetFileNames: "index.css",},},},esbuild: {drop: ["debugger"], // 移除 console 和 debugger 语句},
});

发布

将调试后的插件发不到中英仓库中，如：npm 或者

使用

1. 在项目的package.json 中引入

pnpm add @elcker/koi-plugin-ui

2. 配置插件

在项目的配置文件中引入即可，在 src 下 koi.main.ts，如：

import { defineKoiSite, setActivePinia, koiPlugins } from "@elcker/koi-site";
import KoiPluginUI from "@/plugin/koi-plugin-ui";
import "./global.css";const { app, pinia, KoiPluginInstance } = defineKoiSite({plugins: [KoiPluginUI({showBanner: true,}),],
});

3. 使用插件样式

在项目的全局参数中

@import "@elcker/koi-plugin-ui/dist/index.css";

KVA教程-插件开发

“如果结果不如你所愿，就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持，而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 KVA 技术教程 * 插件开发简介插件开发是KVA&a…...

编程日记 2025/6/3 1:38:08

AI守护煤矿安全生产：基于视频智能的煤矿管理系统架构解析

前言本文我将介绍我和我的团队自主研发设计的一款AI产品的成果展示——“基于视频AI识别技术的煤矿安全生产管理系统”。这款产品是目前我在创业阶段和几位矿业大学的博士共同从架构设计、开发到交付的全过程中首次在博客频道发布, 我之前一直想写但没有机会来整理这套系统的…...

编程日记 2025/6/3 0:41:18

AI编程工具横向评测--Cloudstudio塑造完全态的jupyter notebook助力数据分析应用开发

AI编程工具横向评测–Cloudstudio塑造完全态的jupyter notebook助力数据分析应用开发数据分析类应用的开发，指的是首先进行数据分析，比如统计学分析、机器学习模型的构建等，然后将分析的流程开发成数据分析类的工具，或者将数据分…...

编程日记 2025/6/3 21:49:34

04JavaWeb——Maven-SpringBootWeb入门

Maven 课程内容初识Maven Maven概述 Maven模型介绍 Maven仓库介绍 Maven安装与配置 IDEA集成Maven 依赖管理 01. Maven课程介绍 1.1 课程安排学习完前端Web开发技术后，我们即将开始学习后端Web开发技术。做为一名Java开发工程师，后端Web开发…...

编程日记 2025/6/3 21:52:29

ThreeJS能力演示——界面点选交互能力

1、支持界面点选点选模型整体思路是：根据camera位置作为起始点，叠加鼠标相对位置作为偏置，摄像头方向作为射线方向。根据射线方向中的遇到的3D物体列表，第一个遇到的物体作为被点选的物体。 // 鼠标事件处理let selectedObjec…...

编程日记 2025/6/3 19:30:56

Linux：常用命令--文件与目录操作

ls命令功能：（list）列出当前目录的文件信息语法：ls [-l -h -a] [参数] 参数：被查看的文件夹，不提供参数，表示查看当前工作目录-l，以列表形式查看每个文件的属性，包含…...

编程日记 2025/6/3 21:52:12

Node.js NativeAddon 构建工具：node-gyp 安装与配置完全指南

Node.js NativeAddon 构建工具：node-gyp 安装与配置完全指南 node-gyp Node.js native addon build tool [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/no/node-gyp 项目基础介绍及主要编程语言 Node.js NativeAddon 构建工具（node-gyp…...

编程日记 2025/6/3 21:50:09

docker运行Java项目，Kaptcha因为字体缺失没法显示验证码图片

2015工作至今，10年资深全栈工程师，CTO，擅长带团队、攻克各种技术难题、研发各类软件产品，我的代码态度：代码虐我千百遍，我待代码如初恋，我的工作态度：极致，责任&#xff…...

编程日记 2025/6/3 0:21:57

C++otlv4连接sql serveer使用记录（注意点）

C使用otlv4在做插入时，有一些设计的坑需要注意插入数据： 当要给表中插入单个字符时，数据库表设计使用varchar(1)是合理的，但是otlv4一直报错char。后续查很久才知道，otlv4所写的绑定的字符数组的长度应该实际数组…...

编程日记 2025/6/3 21:51:56

[思考记录]认知和思考

在以前，具备一定的技能和经验就能轻易找到自己的一席之地。但在AI时代下，这些东西很容易就被抹平，那么我们的竞争力又在哪里？“认知和思考”是一个方向，帮助我们能去应对复杂情境、帮我们更容易去看到真相。 1.很多时…...

编程日记 2025/6/3 21:50:48

前端开发Web

Ajax 概念:Asynchronous JavaScriptAnd XML，异步的JavaScript和XML 作用: 数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的…...

编程日记 2025/6/3 5:07:47

【C++提高篇】—— C++泛型编程之模板基本语法和使用的详解

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、模板的概念二、函数模板2.1 函数模板的使用2.2 函数模板注意事项2.3 普通函数与函数模板的区别2.4 普通函数与函数模板的调用规则2.5 模板的局限性三、类模…...

编程日记 2025/6/2 15:31:07

WPS计算机二级•高效操作技巧

听说这里是目录哦斜线表头展示项目名称🍋‍🟩横排转竖排🍐批量删除表格空白行🍈方法一方法二建辅助列找空值能量站😚 斜线表头展示项目名称🍋‍🟩 选中单元格，单击右键➡️“设…...

编程日记 2025/6/2 22:13:25

【Maui】视图界面与数据模型绑定

文章目录前言一、问题描述二、解决方案三、软件开发（源码）3.1 创建模型3.2 视图界面3.3 控制器逻辑层四、项目展示前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用。使用 .NET MAUI&…...

编程日记 2025/6/4 10:36:11

vue3-sfc-loader 加载远程.vue文件(sfc)案例

注意事项 style标签如果增加了lang比如：lang“scss”，需要提供scss-loader的处理器，这个暂时没研究，我的处理方式是将动态模版的css放在了全局打包暂时还没有测试，后面测试了会同步更新安装vue3-sfc-loader npm inst…...

编程日记 2025/6/2 21:34:22

Hadoop美食推荐系统爬虫1.8w+数据协同过滤余弦函数推荐美食 Springboot Vue Element-UI前后端分离

Hadoop美食推荐系统爬虫1.8w数据协同过滤余弦函数推荐美食 Springboot Vue Element-UI前后端分离【Hadoop项目】 1. data.csv上传到hadoop集群环境 2. data.csv数据清洗 3.MapReducer数据汇总处理, 将Reducer的结果数据保存到本地Mysql数据库中 4. SpringbootEchartsMySQL 显…...

编程日记 2025/6/2 6:54:30

使用Linux驱动程序的fasync(文件异步通知机制)向用户空间发送SIGIO信号的学习记录

前言本文学习使用Linux驱动程序的fasync(文件异步通知机制)向用户空间发送SIGIO信号。 fasync(文件异步通知机制)名字的来历 fasync 是 “file asynchronous” 的缩写，意思是文件异步通知。这里的文件是指文件结构体struct file *file ，关于文件结…...

编程日记 2025/6/2 16:42:11

面试经验分享-回忆版某小公司

说说你项目中数据仓库是怎么分层的，为什么要分层？ 首先是ODS层，连接数据源和数据仓库，数据会进行简单的ETL操作，数据来源通常是业务数据库，用户日志文件或者来自消息队列的数据等中间是核心的数据仓库层&a…...

编程日记 2025/6/2 20:02:23

【算法学习笔记】35：扩展欧几里得算法求解线性同余方程

线性同余方程问题线程同余方程问题是指 a x ≡ b ( m o d m ) ax \equiv b~(mod~m) ax≡b (mod m)，给定 a a a、 b b b和 m m m，找到一个整数 x x x使得该方程成立，即使得 a x m o d m b ax~mod~mb ax mod mb，随便返回任何一个…...

编程日记 2025/5/31 21:02:52

ent.SetDatabaseDefaults()

在 AutoCAD 的 .NET API 中，ent.SetDatabaseDefaults() 这句代码通常用于将一个实体（Entity）对象的属性设置为与其所在的数据库（Database）的默认设置相匹配。这意味着，该实体将采用数据库级别的默认颜色、图…...

编程日记 2025/6/2 22:13:57

使用docker部署tomcat服务器 1、拉去tomcat镜像 [rootlocalhost yum.repos.d]# sudo docker pull docker.io/tomcat:9 9: Pulling from library/tomcat de44b265507a: Pull complete 4c2afd91a87d: Pull complete 89e9bbcfa697: Pull complete 11be3e613582: Pull complet…...

编程日记 2025/5/29 4:44:34

Jenkins 启动

废话这一阵子感觉空虚，心里空捞捞的，总想找点事情做，即使这是一件微小的事情，空余时间除了骑车、打球，偶尔朋友聚会 … 还能干什么呢？ 当独自一人时，究竟可以做点什么，填补这空虚…...

编程日记 2025/6/3 16:16:19

Elasticsearch（ES）基础查询语法的使用

1. Match Query (全文检索查询) 用于执行全文检索，适合搜索文本字段。 { “query”: { “match”: { “field”: “value” } } } match_phrase：精确匹配短语，适合用于短语搜索。 { “query”: { “match_phrase”: { “field”: “text” }…...

编程日记 2025/6/1 19:07:07

SpringCloud系列教程：微服务的未来（十四）网关登录校验、自定义过滤器GlobalFilter、GatawayFilter

前言在微服务架构中，API 网关扮演着至关重要的角色，负责路由请求、执行安全验证、流量控制等任务。Spring Cloud Gateway 作为一个强大的网关解决方案，提供了灵活的方式来实现这些功能。本篇博客将重点介绍如何在 Spring Cloud Gateway 中…...

编程日记 2025/6/2 6:49:36

Android Studio：Linux环境下安装与配置

更多内容：XiaoJ的知识星球 Android Studio：Linux环境下安装与配置 1.安装JDK2.安装Android Studio2.1 获取安装包2.2 安装（1）配置环境变量：（2）运行安装：（3）配…...

编程日记 2025/6/3 4:58:22

使用AI生成金融时间序列数据：解决股市场的数据稀缺问题并提升信噪比

“GENERATIVE MODELS FOR FINANCIAL TIME SERIES DATA: ENHANCING SIGNAL-TO-NOISE RATIO AND ADDRESSING DATA SCARCITY IN A-SHARE MARKET” 论文地址：https://arxiv.org/pdf/2501.00063 摘要金融领域面临的数据稀缺与低信噪比问题，限制了深度学习在…...

编程日记 2025/6/3 6:31:09

【银河麒麟高级服务器操作系统】业务访问慢网卡丢包现象分析及处理过程

了解更多银河麒麟操作系统全新产品，请点击访问麒麟软件产品专区：product.kylinos.cn 开发者专区：developer.kylinos.cn 文档中心：document.kylinos.cn 交流论坛：forum.kylinos.cn 服务器环境以及配置【内核版本…...

编程日记 2025/6/2 18:01:24

如何将数据库字符集改为中文，让今后所有的数据库都支持中文

最后一行有我自己的my.ini文件数据库输入中文数据时会变为乱码， 这个时候，我们为每个数据库设置字符集，太过于麻烦，为数据库单独设置重启后又会消失 Set character_set_database’utf8’; Set character_set_server’utf8’; …...

编程日记 2025/6/4 8:44:14

Linux-C/C++--深入探究文件 I/O (下)(文件共享、原子操作与竞争冒险、系统调用、截断文件)

经过上一章内容的学习，了解了 Linux 下空洞文件的概念；open 函数的 O_APPEND 和 O_TRUNC 标志；多次打开同一文件；复制文件描述符；等内容本章将会接着探究文件IO，讨论如下主题内容。  文件共享介绍&…...

编程日记 2025/5/28 9:02:57

Linux Bash 中使用重定向运算符的 5 种方法

注：机翻，未校。 Five ways to use redirect operators in Bash Posted: January 22, 2021 | by Damon Garn Redirect operators are a basic but essential part of working at the Bash command line. See how to safely redirect input and output t…...

编程日记 2025/6/2 6:49:00

opengrok_windows_环境搭建

目录软件列表软件安装工程索引编辑工程部署问题列表软件列表软件名下载地址用途JDKhttps://download.java.net/openjdk/jdk16/ri/openjdk-1636_windows-x64_bin.zipindex 使用java工具tomcathttps://dlcdn.apache.org/tomcat/tomcat-9/v9.0.98/bin/apache-tom…...

编程日记 2025/6/3 16:21:59

【无法下载github文件】虚拟机下ubuntu无法拉取github文件

修改hosts来进行解决。步骤一：打开hosts文件 sudo vim /etc/hosts步骤二：查询 github.com的ip地址 https://sites.ipaddress.com/github.com/#ipinfo将github.com的ip地址添加到hosts文件末尾，如下所示。 140.82.114.3 github.com步骤三…...

编程日记 2025/6/2 17:53:19

python——句柄

一、概念句柄指的是操作系统为了标识和访问对象而提供的一个标识符，在操作系统中，每个对象都有一个唯一的句柄，通过句柄可以访问对象的属性和方法。例如文件、进程、窗口等都有句柄。在编程中，可以通过句柄来操作这些对象&#x…...

编程日记 2025/6/2 19:14:01

.Net Core微服务入门系列（一）——项目搭建

系列文章目录 1、.Net Core微服务入门系列（一）——项目搭建 2、.Net Core微服务入门全纪录（二）——Consul-服务注册与发现（上） 3、.Net Core微服务入门全纪录（三）——Consul-服务注…...

编程日记 2025/6/3 16:23:19

Net Core微服务入门全纪录（三）——Consul-服务注册与发现（下）

编程日记 2025/6/3 16:23:51

[苍穹外卖] 1-项目介绍及环境搭建

项目介绍定位：专门为餐饮企业（餐厅、饭店）定制的一款软件产品功能架构： 管理端 - 外卖商家使用用户端 - 点餐用户使用技术栈： 开发环境的搭建整体结构： 前端环境前端工程基于 nginx 运行 - Ngi…...

编程日记 2025/6/3 16:22:16

【PCIe 总线及设备入门学习专栏 2 -- PCIe 的 LTSSM 和 Enumeration】

文章目录 OverviewLTSSM StatesDetect StatesDETECT_QUIETDETECT_ACTDETECT_WAITPolling StatesPOLL_ACTIVEPOLL_CONFIGPOLL_COMPLIANCEConfiguration StatesCONFIG_LINKWD_STARTCONFIG_LINKWD_ACCEPTCONFIG_LANENUM_WAITCONFIG_LANENUM_ACCEPTCONFIG_COMPLETECONFIG_IDLERecov…...

编程日记 2025/6/3 13:56:47

简介

概念