我的世界低延迟联机 此方案需要服务器，主要针对国外服务器，一般延迟比较高，使用服务器部署frps服务端，充当中间信令服务器,反向代理服务器实现原理通过frp的p2p点对点连接实现低延迟联机操作步骤软件下载下载对应的frp软件，服务器，本地设备（Windows，安卓）都需要下载https://github.com/fatedier/frp/releases配置服务器端服务器端的配置文件frps.toml[common] bind_port = 10008 enable_p2p = true启动服务器的frps# frps的当前目录运行，指定配置文件路径 ./frps -c frps.toml输出frps started successfully就启动成功了配置客户端（被访问端）即开服的设备（Windows，安卓termux）配置文件server.toml# 服务器的域名或ip地址 serverAddr = "x.x.x.x" serverPort = 10008 # 如果默认的 STUN 服务器不可用，可以配置一个新的 STUN 服务器 # natHoleStunServer = "xxx" [[proxies]] name = "p2p_mc" type = "xtcp" # 只有共享密钥 (secretKey) 与服务器端一致的用户才能访问该服务 secretKey = "aaaaa" localIP = "127.0.0.1" # 我的世界服务器的端口 localPort = 25565启动客户端的fprc# cmd输入 frpc.exe -c server.toml配置客户端（访问者端）配置文件client.tomlserverAddr = "x.x.x.x" serverPort = 10008 # 如果默认的 STUN 服务器不可用，可以配置一个新的 STUN 服务器 # natHoleStunServer = "xxx" [[visitors]] name = "p2p_mc_visitor" type = "xtcp" # 要访问的 P2P 代理的名称 serverName = "p2p_mc" secretKey = "aaaaaa" # 绑定本地端口以访问 远程服务 bindAddr = "127.0.0.1" bindPort = 6000 # 如果需要自动保持隧道打开，将其设置为 true # keepTunnelOpen = false启动客户端的frpc# cmd输入 frpc.exe -c client.toml验证是否可以成功建立p2p连接命令行输入curl localhost:6000看到这个提示则表示成功建立了连接客户端连接我的世界服务器的地址为localhost:6000

Vue3 快速入门 使用 Vite 快速搭建 Vue 3 项目创建项目：npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev目录结构：src/: 主代码目录main.js: 应用入口文件Setup 语法糖与响应式对象在 Vue 3 的 <script setup> 中，ref 和 reactive 是核心的响应式 API：ref: 用于定义单个值的响应式数据。<script setup> import { ref } from 'vue'; const count = ref(0); const increment = () => { count.value++; }; </script> <template> <button @click="increment">{{ count }}</button> </template>注意：访问或更新 ref 的值需要通过 .value。reactive: 用于定义复杂对象的响应式数据。<script setup> import { reactive } from 'vue'; const state = reactive({ count: 0, message: 'Hello Vue 3' }); const increment = () => { state.count++; }; </script> <template> <button @click="increment">{{ state.count }} - {{ state.message }}</button> </template>注意：reactive 不需要 .value，直接操作对象属性即可。区别ref 更适合简单的标量值。reactive 更适合复杂的嵌套对象。常用指令条件与循环v-if 和 v-else: 条件渲染。<template> <p v-if="isLoggedIn">欢迎回来！</p> <p v-else>请登录</p> </template>v-show: 控制元素显示。<template> <p v-show="isVisible">这是一条可见信息</p> </template>v-for: 列表渲染。<script setup> const items = [1, 2, 3, 4]; </script> <template> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template>事件绑定@click: 点击事件。<template> <button @click="handleClick">点击我</button> </template> <script setup> const handleClick = () => { alert('按钮被点击了！'); }; </script>@input 和 v-model: 双向绑定。<template> <input v-model="text" /> <p>{{ text }}</p> </template> <script setup> import { ref } from 'vue'; const text = ref(''); </script>@mouseenter 和 @mouseleave: 鼠标事件。<template> <div @mouseenter="onHover" @mouseleave="onLeave">悬停我！</div> </template> <script setup> const onHover = () => { console.log('鼠标进入'); }; const onLeave = () => { console.log('鼠标离开'); }; </script>属性绑定v-bind: 动态绑定属性。<template> <img :src="imageUrl" alt="动态图片" /> </template> <script setup> const imageUrl = 'https://example.com/image.jpg'; </script>v-once: 一次性渲染。<template> <p v-once>{{ message }}</p> </template> <script setup> const message = '这段文字只渲染一次'; </script>自定义组件子组件定义一个简单的按钮组件：<script setup> import { defineProps } from 'vue'; defineProps({ label: String }); </script> <template> <button>{{ label }}</button> </template>父组件父组件传递 label 属性：<script setup> import MyButton from './MyButton.vue'; </script> <template> <MyButton label="Click Me" /> </template>父子组件数据传递父传子通过 props 传递数据：<!-- 子组件 --> <script setup> import { defineProps } from 'vue'; defineProps({ message: String }); </script> <template> <p>{{ message }}</p> </template><!-- 父组件 --> <script setup> import ChildComponent from './ChildComponent.vue'; </script> <template> <ChildComponent message="Hello from Parent" /> </template>子传父通过 emit 通知父组件：<!-- 子组件 --> <script setup> import { defineEmits } from 'vue'; const emit = defineEmits(['updateMessage']); const notifyParent = () => { emit('updateMessage', 'Message from Child'); }; </script> <template> <button @click="notifyParent">Notify Parent</button> </template><!-- 父组件 --> <script setup> import ChildComponent from './ChildComponent.vue'; const handleUpdateMessage = (message) => { console.log(message); }; </script> <template> <ChildComponent @updateMessage="handleUpdateMessage" /> </template>