vue3中如何自定义插件

英译汉插件

1. i18n.ts

export default {install: (app: any, options: any) => {// 注入一个全局可用的$translate()方法app.config.globalProperties.$translate = (key: string) => {// 获取options对象的深层属性// 使用key作为索引return key.split(".").reduce((o, i) => {console.log(o, i)if (o) return o[i]}, options)}}
}

2. main.ts全局注入插件

app.use(i18n, {hello: {world: "你好世界"}
})

3. vue模版中使用

<span>{{ $translate("hello.world") }}</span>

4. ts类型声明文件
   tsconfig.json/env.d.ts

// / <reference types="vite/client" />import { ComponentCustomProperties } from "vue"declare module "@vue/runtime-core" {// 为 $translate 添加类型声明interface ComponentCustomProperties {$translate: (key: string) => string}
}