vue插件的开发流程

xiaoxiao2025-06-12  21

趁有机会,简单回顾下vue插件开发的过程。学习本身就是个不断重复滴过程嘛:

一、官网插件的开发文档地址

https://cn.vuejs.org/v2/guide/plugins.html

 

二、简单唠一唠

但是呢,如果看官网文档的话,有的小朋友可能就云里雾里了,不想再进行下去了,其实vue对于插件的定义就是,使用Vue.use方法,将引入的install方法里面相关Vue操作的方法逻辑运行了,实现在全局可以调用install方法里面的注册的组件,方法,属性等等

 

三、什么是Vue插件

 

1. 您可以向Vue添加全局级功能。

2. 这是保持Vue组件清晰和小巧的好方法。 您还可以与其他开发人员打包并共享您的代码。

3. 总而言之一句话,插件只不过是一个公开安装方法的对象。

四、如何写一个自己的vue插件

1. 首先,您应该导出插件对象,以便可以在项目的任何位置使用它。 

2. 然后公开带有两个参数的install方法:Vue构造函数和选项对象。 

3. 第二个参数 - 选项 - 是可选的,可以自定义您的插件。 install( Vue, [options] )

4. 在plugin目录下新建一个plugin.js文件

// plugin.js export default {   // 参数一: Vue 构造函数   // 参数二: Vue.use(MyPlugin,{name: '我是王二小'});传递过来的配置参数 {name: '我是王二小'}...   install (Vue, options) {        } }

5. 在main.js中引入

import MyPlugin from './plugin/plugin.js' Vue.use(MyPlugin,{name: '我是王二小'});

五、如何开发一些功能,可以全局使用

安装方法包含以下一项或多项:

1. 添加一些全局方法或属性。

2. 添加一个或多个全局资产:指令/过滤器/转换等。

3. 通过Vue.mixin()方法添加一些组件选项 ()          注:Mixins是一种灵活的方式来为Vue组件分配可重用的功能。 mixin对象可以包含任何组件选项。 当组件使用mixin时,mixin中的所有选项将“混合”到组件自己的选项中

4. 通过将它们附加到Vue.prototype来添加一些Vue实例方法 (不是很推荐)

5. 案例分析

// 引入自定义组件 import Component from '/src/components/Component.vue' export default {   install (Vue, options) {      // 1. 添加全局静态方法或者属性  Vue调用      Vue.yourMethod = (value) => value      //2. 全局注册组件      Vue.component('component', Component)      //3. 添加 `Vue.mixin()` 向全局组件内部注入方法      Vue.mixin({          // 向组件内部混入生命周期内部逻辑(同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用)          created() {             console.log('Hello from created hook!')          }      })       // Vue.prototype 原型添加属性和方法 内部this可直接调用      Vue.property.$myProperty = 'This is a Vue instance property.'   } }

 

转载请注明原文地址: https://www.6miu.com/read-5031696.html

最新回复(0)