【九月打卡】第13天 Vue 的插件系统和组件库的入口文件设计

课程名称：web前端架构师

课程章节：第11周 第五章

主讲老师：张轩

课程内容：Vue 的插件系统和组件库的入口文件设计

Vue 的插件系统

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例：

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

import type { Plugin } from 'vue'

export const UploadFilePlugin: Plugin = {
  install (app) {
    app.component('UploadFile', UploadFile)
  }
}

这个是之前实现的 UploadFilePlugin 组件，这里就使用了 plugin，可以将我们这个组件变成全局的组件

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：

• 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
• 通过 app.provide() 使一个资源可被注入进整个应用。
• 向 app.config.globalProperties 中添加一些全局实例属性或方法
• 一个可能上述三种都包含了的功能库 (例如 vue-router)。

其他内容可以参考官方文档 https://cn.vuejs.org/guide/reusability/plugins.html

下面写一个简单的插件，就跟之前实现的 一样

import type { Plugin } from 'vue'
import UploadFile from '@/components/UploadFile'
const plugins: Plugin = {
  install (app) {
    // 全局属性
    app.config.globalProperties.$translate = (msg: string) => `translate: ${msg}`
    // 全局组件
    app.component('UploadFile', UploadFile)
    // privide
    app.provide('test', {
      msg: 'Hello'
    })
  }
}
export default plugins

<script setup lang="ts">
import { getCurrentInstance, inject } from 'vue'
console.log(getCurrentInstance()?.appContext.config.globalProperties.$translate('aaa'))
console.log(inject('test'))
</script>

<template>
<div>
  {{ $translate('asdfdsf') }}
</div>

组件库入口文件设计

组件库的导入方式支持两种

• 一次导入所有组件
• 按需导入

一次导入所有组件

组件库设计成跟 ElementPlus 类似的草如方式

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需导入

<script setup lang="ts">
  import { ElButton } from 'element-plus'
</script>
<template>
  <el-button>I am ElButton</el-button>
</template>

同时还支持使用 app.use 将组件设置为全局组件

import { ElButton } from 'element-plus'
import App from './App.vue'

...
const app = createApp(App)
...
app.use(ElButton)
app.mount('#app')

实现

前面已经说过了如何支持 app.use 将组件设置为全局组件，下面看如何使用一次导入所有组件

实现思路就是我们提供一个入口文件，当调用 app.use 方法时，就会触发我们导出的 install 方法

import type { Plugin } from 'vue'
const plugins: Plugin = {
  install (app) {
    // 注册全部组件
  }
}
export default plugins

我们可以在 install 方法中注册我们组件库的全部组件

import type { Plugin } from 'vue'
import UploadFile from '@/components/UploadFile'
import LText from '@/components/LText'

const components = [UploadFile, LText, ...]
const plugins: Plugin = {
  install (app) {
    components.forEach(component => {
      app.component(component.name, component)
      // 或使用app.use(component)
    })
    app.component('UploadFile', UploadFile)
  }
}
export default plugins

就这样我们组件库的入口文件设计就完毕了