关于vue3:Vue30-Typescript-使用-VueuseHighlight-问题记录

在应用 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 = {};