“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”

背景：

当你想往vue新增一个全局功能时，你可能会这样写：

// main.ts
app.config.globalProperties.$toast=()=>{ ...}

这样直接在入口文件里加上全局功能看起来很方便，但问题在于，我们无法确保其它人之前没有写过一个同名的全局toast功能，所以如果你贸然这样写，很容易将其它人的覆盖掉，导致问题。

所以这个功能的使用与否，应该交由用户来选择。而要实现这个功能，就需要用到插件。

插件的使用步骤

先在src/plugin 文件夹下新建一个js文件
写上如下代码：

// plugin.js
export default {
    install: (app, options) => {
        app.config.globalProperties.$toast = (toastOptions) => {
          // .....
    }
};

在main.ts中使用这个插件

import {createApp} from 'vue';
import App from './App.vue';
import plugin from '@/plugin/plugin .js';
const app = createApp(App);
app.use(toast);

这里的app.use和我们所定义的插件之间，参数的传递关系如下：

具体到文件中则可以这样写来访问到所定义的全局属性


<script lang="ts">

import {getCurrentInstance} from 'vue';

export default {
  setup() {
      const instance = getCurrentInstance();
      instance.appContext.config.globalProperties.$toast({})
    }
  }
};
</script>

Vue3插件如何使用

背景：

插件的使用步骤