在vue3中使用多个自定义指令，采用引入到main.js文件中

在src下创建一个自定义指令存放的文件夹：

例如我这里建了一个叫
directive的文件夹，index是入口文件，inputenglish.ts就是我现在设置的一个用于限制输入框只能输入英文字符的指令。
inputenglish.ts（暴露注册这个指令的方法）：

框架如下:

import type { App } from 'vue';
export function setInputEnglish(app: App) {
    app.directive('input-english',(el)=>{
    .......
    })
}

在index.ts入口文件引入你写好要在项目中使用的每一个指令文件，,并暴露一个注册所有指令的方法：

import type {App} from 'vue';
import { setInputEnglish } from './inputEnglish';
export function setDirectives(app: App) {
    // 加载需要的指令，引入之后放进来
    setInputEnglish(app);
  }

要在项目初始化的时候就自动注册所有自定义指令,所以在main.js中引入注册所有指令的方法并使用:

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { setDirectives } from "./directives";

const app = createApp(App);

// 注册所有自定义指令
setDirectives(app);

app.mount("#app");

在项目中使用：采用v-xxxx即可，例如我这里定义的是input-english，那么直接就是v-input-english：