在Vite + TypeScript + Vue 3项目中，可以通过以下方式实现自定义指令和插件：
自定义指令
创建一个自定义指令的文件，例如src/directives/focus.ts:
import { App, DirectiveBinding } from 'vue';
export const focus = {
// 当被绑定的元素插入到 DOM 中时调用
mounted(el: HTMLElement, binding: DirectiveBinding) {
if (binding.value) {
el.focus();
}
},
// 当绑定的值更新时调用
updated(el: HTMLElement, binding: DirectiveBinding) {
if (binding.value) {
el.focus();
}
}
};
export default {
install(app: App) {
app.directive('focus', focus);
}
};
然后在main.ts中使用这个指令：
import { createApp } from 'vue';
import App from './App.vue';
import directives from './directives/focus'; // 导入自定义指令
const app = createApp(App);
app.use(directives); // 使用自定义指令插件
app.mount('#app');
在Vue组件中使用这个指令：
<template>
<input v-focus="true" type="text">
</template>
自定义插件
创建一个自定义插件的文件，例如src/plugins/myPlugin.ts:
import { App } from 'vue';
export default {
install(app: App) {
// 添加全局方法或属性
app.config.globalProperties.$myGlobalMethod = () => {
console.log('This is a global method!');
};
}
};
在main.ts中使用这个插件：
import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './plugins/myPlugin';
const app = createApp(App);
app.use(myPlugin);
app.mount('#app');
在Vue组件中使用插件提供的方法：
<template>
<button @click="$myGlobalMethod">Call Global Method</button>
</template>
以上代码展示了如何在Vite + TypeScript + Vue 3项目中创建和使用自定义指令和插件。