【架构师（第三十四篇）】 业务组件库开发之 vue3 的插件系统
Vue3 的插件系统
一段代码给 vue 的应用实例添加全局功能。它的格式是一个暴露出 install（） 方法的 Object，或者一个 function。
它没有严格的限制，一般有以下几种功能。
- 添加全局方法或者属性
- 添加全局资源，指令，过滤器（
vue3已移除）等。 - 通过全局混入来添加一些组件选项。
- 通过
config.globalProperties来添加app实例方法。
写一个注册全局属性的插件
编写插件代码
import type { App } from 'vue';
const plugins = {
install: (app: App) => {
app.config.globalProperties.$test = () => {
console.log('this is a test plugin !');
};
},
};
export default plugins;注册插件
import { createApp } from 'vue';
import App from './App.vue';
import testPlugin from './test.plugin';
const app = createApp(App);
app.use(testPlugin);
app.mount('#app');使用插件方法
import { onMounted, getCurrentInstance } from 'vue';
onMounted(() => {
const vm = getCurrentInstance()
vm?.appContext.config.globalProperties.$test()
})写一个注册全局组件的插件
编写插件代码
import type { App } from 'vue';
import GlobalComponent from './components/GlobalComponent.vue';
const plugins = {
install: (app: App) => {
app.component('global-component', GlobalComponent);
},
};
export default plugins;写一个提供 provide 的插件
编写插件代码
import type { App } from 'vue';
const plugins = {
install: (app: App) => {
app.provide('test', { message: 'test plugin' });
},
};
export default plugins;使用插件内容
import { inject } from 'vue';
const test = inject('test')
console.log('🚀🚀 ~ test', test);创建组件库基本结构代码
使用 imooc-cli 创建项目，选择项目基础模板，然后把下面几个文件转移到项目中。
- l-text.vue
- defaultProps.ts
- useComponentCommon.ts
创建组件库入口文件
整体导入
所有组件一次性全部导入作为插件使用
import LegoComponent from 'lego-component'
app.use(LegoComponent);- 建立一个入口文件
index.ts - 将所有组件导入，作为一个数组，创建一个
install函数，循环调用app.component - 默认导出这个
install函数
按需导入
单个组件导入作为插件使用
import { LText } from 'lego-component';
app.use(LText);
// 或者
app.component(LText.name,LText)- 每个组件新建一个文件夹，并且创建一个单独的
index.ts文件 - 每个组件设计成一个插件，一个拥有
install方法的Object - 在全局入口文件中到出
代码编写
整个项目的入口文件
// src\index.ts
import type { App } from 'vue';
// 组件对象
import LText from './components/LText';
import LImage from './components/LImage';
// 组件列表
const components = [LText, LImage];
// 遍历 components 注册全局组件
const install = (app: App) => {
components.forEach((c) => {
app.component(c.name, c);
});
};
// 按需导出
export { LText, install };
// 默认整体导出
export default {
install,
};单个组件的入口文件
// src\components\LText\index.ts
import type { App } from 'vue';
import LText from './LText.vue';
// 注册单个组件的插件
LText.install = (app: App) => {
app.component(LText.name, LText);
};
export default LText;举报
腾讯云开发者
