Vue3.0 + Typescript 使用 Vue.use(Highlight) 问题记录

在使用 Vue3.0 实验项目中 对项目中实验的使用 highlightjs 并以自定义指令的形式来写

其中遇到 用 Typescript 写 Vue3.0 的 Vue.use() 的问题

已在 npm i highlight.js 的情况下

1. 先定义 Vue 的外部插件highlight.ts

  import Vue from 'vue';
import Hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css'

interface Highlightjs {
[x:string]:any
}

let Highlight:Highlightjs = {};
// let Highlight:any = {};

Highlight.install = function (Vue:any,options:any) {

    Vue.directive('highlightA',{
        inserted:function(el:any){
            let blocks = el.querySelectorAll('per code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i]
                Hljs.highlightBlock(item)
            }
        }
    })

    Vue.directive('highlightB',{
        componentUpdated:function(el:any){
            let blocks = el.querySelectorAll('per code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i]
                Hljs.highlightBlock(item)
            }
        }
    })
}

export default Highlight

1. 在 main.ts 引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router';
import Highlight from './lib/typescript/highlight';

const app = createApp(App)

app.use(router)
app.use(Highlight)

app.mount('#app')

error

大概的意思是 Vue.use() 中缺少 我定义的 Highlightjs
而它请求的是 {install:PluginInstallFunction} 的对象
所以直接给它一个对象

    interface Highlightjs {
    [x:string]:any
    }

    //let Highlight:Highlightjs = {};
    let Highlight:any = {};