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";
原文地址：https://blog.csdn.net/sxlesq/article/details/145262254
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！