Vue3 install插件机制

介绍

Vue3 将组件设置为插件的食用方法

Vue3自定义插件机制 install

Vue3插件机制官网 (opens new window)

目标：熟悉Vue的插件机制（针对Vue核心规则的一种扩展机制）

• Vue3配置全局插件是 app. (Vue2是 Vue.)
• Vue3设置插件的时候 设置插件的Vue组件需要 设置name属性
• 全局组件如果调用另一个全局组件 需要单独import导入 不可直接使用 (医者不能自医)

设置Vue3自定义插件 install

Vue3插件机制官网 (opens new window)

第一步 把写好的Vue组件 设置为插件

• 把写好的Vue组件 在一个文件中 统一设置为插件

• 设置插件的Vue组件需要 设置name属性

  • app.component 设置插件的名称 需要和 组件内部设置的name名称一致

// 导入需要设置为插件的Vue组件
import XtxSkeleton from './xtx-skeleton.vue'

// 自定义一个插件导出
export default {
  install (app) {
    // 配置全局插件 app.component 设置插件的名称 需要和 组件内部设置的name名称一致
    // app表示Vue全局插件的实例对象 (Vue2是Vue. Vue3是app.)
  app.component(XtxSkeleton.name, XtxSkeleton) // (导入组件的名称的name名.name,插件的名称)
  }
}

第二步 实例化插件 让其能在Vue组件中使用

• 入口文件一般是 main.js
• 通过 .use(插件名称) 实例化该插件

// 导入实例化的Vue3
import { createApp } from 'vue'
import App from './App.vue'
// 导入自定义插件的配置文件 让其实例化 可在组件内使用
import XtxUI from './components/library/index'

// 在createApp(App)后面 .use()导入自定义的插件
createApp(App).use(XtxUI).mount('#app')

第三步 实例化插件后 无需导入 直接在Vue组件中使用

• 无需导入 直接在template 模板中调用插件即可(导入配置的插件名称)

<template>
  <div class="home-banner">
  <!-- 直接导入插件即可 可以在里面绑定参数 -->
 <XtxSkeleton />
  </div>
</template>

注意:

​ 如果需要给插件传递参数 通常会动态绑定数据: ( 动态绑定基本类型的传入插件的数据 可保证插件需求的数据类型)

批量导入Vue插件方法

• 适用于 所有插件都集合在一个文件夹 (index.js里面)
• 通过require方法筛选插件 然后importFn进行批量导入插件方法 然后批量component实例化Vue插件
• 无需import导入

// -------------------------------------- 批量导入Vue插件
// 参数一：从哪个目录中读取文件
// 参数二：是否读取子目录中的文件：true读取子目录，false不读取子目录
// 参数三：读取文件的匹配规则
const importFn = require.context('./', false, /\.vue$/)
// 自定义一个插件方法导出
export default {
  install (app) {
    // 批量注册 -------------------------------------------------------------------
    // 自动化批量注册全局组件
    importFn.keys().forEach(componentPath => {
      // componentPath表示其中一个组件的路径
      // 根据路径导入组件
      // 返回值component表示组件的实例对象
      const component = importFn(componentPath).default
      // 注册全局组局
      app.component(component.name, component)
    })
  }
}