Vue 插件编写教程

Question

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object，也可以是 function

插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。如： vue-custom-element
2. 添加全局资源：指令/过渡等。如： vue-touch ）
3. 通过全局 mixin 来添加一些组件选项。(如 vue-router )
4. 添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

编写插件

每当插件被添加到应用程序中时，如果它是一个对象，就会调用 install 方法。如果它是一个 function ，则函数本身将被调用。在这两种情况下——它都会收到两个参数：由 Vue 的 createApp 生成的 app 对象和用户传入的选项。

建议在单独的文件中创建它并将其导出，如下所示，以保持包含的逻辑和分离的逻辑。

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

1.使用 app.config.globalProperties

我们想要一个函数来翻译整个应用程序可用的键，因此我们将使用 app.config.globalProperties 暴露它。

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 该函数将接收一个 key 字符串，我们将使用它在用户提供的选项中查找转换后的字符串
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
    
    
    
  }
}

假设用户使用插件时，将在 options 参数中传递一个包含翻译后的键的对象。我们的 $translate 函数将使用诸如 greetings.hello 之类的字符串，查看用户提供的配置内部并返回转换后的值-在这种情况下为 Bonjour! 。

greetings: {
  hello: 'Bonjour!'
}

2. 使用 inject

插件还允许我们使用 inject 为插件的用户提供功能或 attribute。例如，我们可以允许应用程序访问 options 参数以能够使用翻译对象。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

插件用户现在可以将 inject[i18n] 注入到他们的组件并访问该对象

3. 使用 mixin 和 directive

由于我们可以访问 app 对象，因此插件可以使用所有其他功能，例如使用 mixin 和 directive 。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, options)
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })

    app.mixin({
      created() {
        // some logic ...
      }
      ...
    })
  }
}

使用插件

在使用 createApp() 初始化 Vue 应用程序后，你可以通过调用 use() 方法将插件添加到你的应用程序中。

use() 方法有两个参数。

• 第一个是要安装的插件，在这种情况下为 i18nPlugin 。
• 第二个参数是可选的，并且取决于每个特定的插件。在演示 i18nPlugin 的情况下，它是带有转换后的字符串的对象。

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')

awesome-vue 集合了大量由社区贡献的插件和库。

Loading 插件案例

Loading.Vue

<template>
    <div v-if="isShow" class="loading">
        <div class="loading-content">Loading...</div>
    </div>
</template>
    
<script setup lang='ts'>
import { ref } from 'vue';
const isShow = ref(false)//定位 loading 的开关
 
const show = () => {
    isShow.value = true
}
const hide = () => {
    isShow.value = false
}
//对外暴露 当前组件的属性和方法
defineExpose({
    isShow,
    show,
    hide
})
</script>
 
 
<style scoped lang="less">
.loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    &-content {
        font-size: 30px;
        color: #fff;
    }
}
</style>

Loading.ts

import {  createVNode, render, VNode, App } from 'vue';
import Loading from './index.vue'
 
export default {
    install(app: App) {
        //createVNode vue 提供的底层方法 可以给我们组件创建一个虚拟 DOM 也就是 Vnode
        const vnode: VNode = createVNode(Loading)
        //render 把我们的 Vnode 生成真实 DOM 并且挂载到指定节点
        render(vnode, document.body)
        // Vue 提供的全局配置 可以自定义
        app.config.globalProperties.$loading = {
            show: () => vnode.component?.exposed?.show(),
            hide: () => vnode.component?.exposed?.hide()
        }
 
    }
}

Main.ts

import Loading from './components/loading'
 
let app = createApp(App)
app.use(Loading)
 
type Lod = {
    show: () => void,
    hide: () => void
}
//编写 ts loading 声明文件放置报错 和 智能提示
declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        $loading: Lod
    }
}
 
app.mount('#app')