您的当前位置:首页>全部文章>文章详情

Vue3认识Vue插件

发表于:2024-06-23 18:29:08浏览:86次TAG: #Vue
通常我们向Vue全局添加一些功能时,会采用插件的模式,它有两种编写方式:
  • 对象类型:一个对象,但是必须包含一个install 的函数,该函数会在安装插件时执行;
  • 函数类型:一个function,这个函数会在安装插件时自动执行;

插件可以完成的功能没有限制,比如下面的几种都是可以的:

  • 添加全局方法或者 property,通过把它们添加到 config.globalProperties 上实现;
  • 添加全局资源:指令/过滤器/过渡等:
  • 通过全局 mixin 来添加一些组件选项
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能:

示例代码

// App.vue

<template>
  <div class="app">
    <h2>app</h2>
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>
// 安装插件
// 方式一: 传入对象的情况
app.use({
  install: function(app) {
    console.log("传入对象的install被执行:", app)
  }
})


// 方式二: 传入函数的情况
app.use(function(app) {
  console.log("传入函数被执行:", app)
})

我们在main.js中用.use来使用插件

import { createApp } from 'vue'
import App from './03_安装插件/App.vue'

import useDirectives from './01_自定义指令/directives/index'
const app = createApp(App);
// 自定义指令方式一:
// useDirectives(app)
// 自定义指令的方式二:使用插件
app.use(useDirectives)
app.mount('#app')

感谢大家观看,我们下次见

腾讯云采购季云服务器一折促销