本帖子用到的模组

kubejs-neoforge-2101.7.1-build.181

rhino-2101.2.7-build.74

mapperplugin-1.5.0 后文中称其为mp

mcef-neoforge-2.1.6-1.21.1

本帖子用到的前端技术栈

Vue3+Vite+VueRouter

作用

1. 可以做出更好看的gui界面来实现玩家的操作交互，而不用受限于Java写gui来折磨自己
2. 通过gui和KubeJS的双向通信可以实现更多的操作和功能

问答

问：我该如何让mc打开vue项目中的页面
答：将vue项目打包(npm run build)出压缩文件后调用打包文件(dist)中的index.html文件。
问：我该如何用mp调用打包后的html里的路由页面
答：在router配置中设置hashHistory，使用项目文件名/dist/index.html#/路由名来打开对应的路由页面

问：我浏览器预览的页面和mc里预览的gui效果并不一致，而且放大放小窗口字的大小也会变化的很大
答：不要使用px作为元素的宽高，字的大小，使用vh，vw这种百分比参数来适配，在mc设置中的尺寸大小使用自动而不是固定一个大小
问：我该如何让页面和kjs进行交互
答：浏览器中使用文档1中对于mp:gui中浏览器部分调用指令的功能，指令使用我之前教程中eval指令来调用kjs方法即可。kjs可以通过mp自带的指令和api去调用网页中写好的方法并传递方法里的参数
问：我打包后的方法名被混淆了，kjs调用不到咋办
答：在vue文件中将不想混淆的文件塞到window中即可。你可以在那个方法里添加一个id，让kjs中传递这个id去网页中实现不一样的效果，目的是为了大量减少塞到window里的屎

参考文献

文档1：https://doc.mafuyu.moe MapperPlugin教程

本帖子用到的模组

kubejs-neoforge-2101.7.1-build.181

rhino-2101.2.7-build.74

功能预览

作用

1. 可以更好的调试KubeJS里的方法和测试功能。

2. 一些数据驱动的模组只能回调指令而不能执行KubeJS里的方法，这个功能就完全可以成为连接指令和KubeJS的桥梁

   功能介绍

   完整代码展示

   {
     let namespaces = {}
     let GetNamespace = function (/**@type {$ServerPlayer_}*/ player) {
       let key = player.stringUuid
       if (!namespaces[key]) namespaces[key] = {}
       return namespaces[key]
     }
     let DoEval = function (code, player) {
       getServer().tell(Text.gold('Code:').append(Text.white(code)).clickCopy(code).hover(Text.translate('chat.copy.click')))
       let ns = GetNamespace(player)
       let ray = player.rayTrace()
       let entity = ray.entity
       let block = ray.block
       try {
         let tmp
         with (ns) {
           with (global) {
             tmp = eval(code)
             getServer().tell(Text.green('Result:').append(Text.white(tmp)).clickCopy(tmp).hover(Text.translate('chat.copy.click')))
           }
         }
         ns.res = tmp
       } catch (e) {
         getServer().tell(Text.red('Error:').append(Text.white(e)).clickCopy(e).hover(Text.translate('chat.copy.click')))
       }
     }
   
     ServerEvents.commandRegistry(event => {
       let { dispatcher, commands, arguments } = event
       dispatcher.register(commands.literal('eval')
         .then(commands.literal('test')
           .then(commands.argument('code', arguments.GREEDY_STRING.create(event))
             .executes(ctx => {
               let { source: { player } } = ctx
               let code = String(arguments.GREEDY_STRING.getResult(ctx, 'code'))
               DoEval(code, player)
               return 1
             })
           )
         )
         .then(commands.literal('local')
           .then(commands.argument('code', arguments.GREEDY_STRING.create(event))
             .executes(ctx => {
               let { source: { player } } = ctx
               let ray = player.rayTrace()
               let entity = ray.entity
               let block = ray.block
               let code = String(arguments.GREEDY_STRING.getResult(ctx, 'code'))
               eval(code)
               return 1
             })
           )
         )
       )
     })
   }
   
   let $ServerLifecycleHooks = Java.loadClass("net.neoforged.neoforge.server.ServerLifecycleHooks")
   
   /**
    * 获取MinecraftServer实例
    * @returns {$MinecraftServer_}
    */
   function getServer() {
     return $ServerLifecycleHooks.getCurrentServer()
   }
   

   根据代码可以看到我是注册了2个指令，一个是/eval test <code>，这个指令在使用的时候会在聊天栏中展示代码执行的结果，如果报错了则会返回报错的内容。另一个就是/eval local <code>，本质上这个指令实现的功能没啥区别，这个指令执行后不会在执行的玩家的聊天栏展示调试的结果，更适合实际的使用。

   在使用指令的时候，你可以直接使用3个变量player:执行当前指令的玩家ServerPlayer，entity:执行指令的玩家看着的实体Entity，block:执行指令的玩家看着的方块BlockContainerJS，这3个变量已经可以适用于很多场景的调试和使用了。

   参考文献

   https://github.com/YukkuriC/kubejs_playground/blob/main/server_scripts/commands/Eval.js 作者:YukkuriC

   https://github.com/YukkuriC/kubejs_playground/blob/nf1.21/server_scripts/commands/Eval.js 作者:YukkuriC

   Ps:需注意的是这里作者获取MinecraftServer的方式都是不一样的，在1.20.1的时候作者通过Utils.server获取，而这个方法在1.21.1并不存在，所以作者换了一种方式获取server，而我这里的获取方式是通过NeoForge的ServerLifecycleHooks来获取的。

@Mafuyu 太高级了我希望我不要用到（

太危险了。。。让我的钱包空空